当前位置：首页 > article >正文

HTML5+css3（定位属性，position：absolute，relative，fixed，相对定位，绝对定位，固定定位，z-index属性）

article 2024/11/15 21:49:43

CSS定位属性

css的定位属性有三种：绝对定位、相对定位、固定定位

position：absolute; //绝对定位

position：relative; //相对定位

position：fixed ; //固定定位

相对定位

让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）

	position: relative;/*相对定位：相对于自己原来的位置*/
	left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
	top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/

相对定位不脱标

相对定位：不脱标，老家留坑，别人不会把它的位置挤走。
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。

相对定位的用途

如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：

（1）微调元素（2）做绝对定位的参考，子绝父相

相对定位的定位值(负数表示相反的方向)

left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移

绝对定位 (abosolute)

定义在横纵坐标。原点在父容器的左上角或左下角

position :abosolute; //绝对定位
left:10px;  //横坐标，x轴
top/bottom :20px; //纵坐标，y轴

绝对定位脱标

绝对定位的盒子脱离了标准文档流。
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。

绝对定位的参考点（重要）

（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角

（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角

##以盒子模型为参考

一个绝对定位的元素，如果父辈元素也出现了定位（相对、绝对、固定）的元素，那么将以父辈这个元素为参考点
就是以父辈的左上角为参考点
要看定位的祖先元素，不一定是父亲，可能是爷爷（谁离自己最近，就以谁为参考点
任何定位都可以是儿子的参考点
- 子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
绝对定位的儿子，直接无视参考点的盒子的padding，从border开始

固定定位(fixed)

相对浏览器窗口进行定位。无论页面如何滚动，这个盒子位置不变
用途1：网页右下角的“返回到顶部”
**用途2：**顶部导航条

z-index属性

表示谁压着谁，数值大的压盖这数值小的
特性：
- 属性值大的位于上层，属性值小的位于下层
- z-index值没有单位，就是一个正整数，默认值为0
- 如果都没有写这个属性，或者属性一样。那么谁在HTML页面里面写在后面，谁就会压在上面（覆盖）。定位的元素永远可以压在没有定位的元素
- 只有定位的元素才可以使用z-index元素。浮动的元素不能用
- 从父现象：父亲怂了，儿子再牛逼也没有用。就是父亲1比父亲2的官大，那么儿子1的官比儿子2的官小，儿子1也是在上层
- 父亲的z-index属性大，即使儿子的z-index属性值小，那么也是在上层

作业

定位悬停文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 伪类悬停，伪元素 */
        .all p:hover::after{
            width: 120px;
            height: 20px;
            content: "我是提示文字撒";
            border: 1px solid;
            background-color: black;
            color: white;
             position: absolute;  /*绝对定位 */
            left: 10px;
            top: 30px;
            border-radius: 5px 5px;
        }
    </style>
</head>
<body>
    <div class="all">
        <p>昂，你来晚了哈</p>
    </div>
</body>
</html>

查看全文

http://www.kler.cn/a/386702.html