目录
- 1 参考文章
- 2 五个属性值
- 3 position:static
- 4 position:relative(相对)
- 5 position:absolute(绝对)
1 参考文章
https://blog.csdn.net/lalala_dxf/article/details/123566909
https://blog.csdn.net/WangMinGirl/article/details/108648533
2 五个属性值
position 属性用来指定一个元素在网页上的位置,一共有5种定位方式,也就是说 position 属性主要有五个属性值。如下:
属性值 | 含义 |
---|---|
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
sticky | 粘性定位 |
3 position:static
- static 是 position 属性的默认值。如果省略 position属性,浏览器就认为该元素是 static定位。
- 浏览器会按照代码的顺序,决定每个元素的位置,这称为"正常的文档流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。
- static定位所导致的元素位置,是浏览器自主决定的,所以这时top、bottom、left、right、 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><link rel="stylesheet" href="./css/index.css" />
</head>
<body>bodybody<div class="box"><div class="same one">one</div><div class="same two">two</div><div class="same three">three</div></div>
</body>
</html>
.box{width:200px;border:5px solid black;
}
.box>.same{width:200px;height:200px;margin-bottom: 20px;text-align: center;
}.box>.one{background:#CCCCCC;
}
.box>.two{background:pink;
}
.box>.three{background:burlywood;
}
4 position:relative(相对)
偏移参考是元素本身原来的位置(static),不会使元素脱离文档流。
搭配top、bottom、left、right这四个属性使用,来设置偏移的方向和距离。left 和 right 不能一起设置,top 和 bottom 不能一起设置。不推荐和margin一起使用。
设置了相对定位的元素不管它是否进行移动,元素仍然占据它原来的位置。不会对其余内容进行调整来适应元素留下的任何空间。
移动元素可能会导致它覆盖其他的元素。
相对定位元素常常作为绝对定位元素的父元素。
层级关系默认规则:定位元素会覆盖在普通元素的上面;都设置定位的两个元素,后写的元素会覆盖在先写的元素上面。
在.box>.two增加
position: relative;
top: 40px;
left: 40px;
.box{width:200px;border:5px solid black;
}
.box>.same{width:200px;height:200px;margin-bottom: 20px;text-align: center;
}.box>.one{background:#CCCCCC;
}
.box>.two{background:pink;position: relative;top: 40px;left: 40px;
}
.box>.three{background:burlywood;
}
5 position:absolute(绝对)
默认以body节点作为参考点,如果祖先元素也是定位流(relative/absolute/fixed), 那么以定位流的祖先元素作为参考点。
绝对定位的元素会脱离普通流。
搭配top、bottom、left、right这四个属性使用,left和right不能一起设置,top和bottom不能一起设置。不推荐和margin一起使用。
子绝父相:如果想要子元素定位于父元素的某个位置,子元素用绝对定位, 父元素用相对定位
.box>.two的position属性改成 absolute;
.box{width:200px;border:5px solid black;
}
.box>.same{width:200px;height:200px;margin-bottom: 20px;text-align: center;
}.box>.one{background:#CCCCCC;
}
.box>.two{background:pink;position: absolute;top: 15px;left: 50px;
}
.box>.three{background:burlywood;
}
为.box>.two的祖先元素.box增加position: relative;属性(子绝父相)
.box{width:200px;border:5px solid black;position: relative;
}
.box>.same{width:200px;height:200px;margin-bottom: 20px;text-align: center;
}.box>.one{background:#CCCCCC;
}
.box>.two{background:pink;position: absolute;top: 15px;left: 50px;
}
.box>.three{background:burlywood;
}