position定位
position一共有四个可选属性:static/relative/absolute/fixed
代码:
<style type="text/css">
* {
margin: 0;
}
.d1 {
position:absolute;
height:400px;
400px;
background:yellow;
left:80px;
top:80px;
}
.d2 {
position:absolute;
height:200px;
200px;
background:red;
left:100px;
top:80px;
}
.d3 {
position:relative;
height:200px;
200px;
background:blue;
left:186px;
top:186px;
}
.d4 {
position:fixed;
height:140px;
140px;
background:black;
left:20px;
top:20px;
}
.d5 {
position:static;
height:140px;
140px;
background:brown;
left:220px;
top:220px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</div>
<div class="d5"></div>
</body>
</html>
代码结果:
- 棕色(brown)的是static的,所以它的left和top没有起作用,一直跑到最上面去了
- 黑色(black)的是fixed的,所以它直接以浏览器窗口开始计算left和top的值
- 红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值,只是因为有一个是absolute所以产生了重叠效果,没有被另外一个挤走。
- 因为默认的类型都是static,所以页面长度等定位的不合理时一个会把一个挤走。
static
position:static
position的默认值,一般不设置position属性时,会按照正常的文档流进行排列
relative
position:relative
- 微调元素,相对于自己原来的位置移动
- 不脱标,形影分离,身体留在原本位置(本体看不见但还是占有位置),影子移动
- relative会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。
- relative产生一个新的定位上下文
absolute
position:absolute
- absolute元素脱离了文档结构。只要元素会脱离文档结构,它就会产生破坏性,导致父元素坍塌。(此时你应该能立刻想起来,float元素也会脱离文档结构)
- absolute元素具有“包裹性”。宽度刚好是内容的宽度。
- absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构,但是它的位置并没有发生变化,还是老老实实的呆在它原本的位置,因为我们此时没有设置top、left的值。
- absolute元素会悬浮在页面上方,会遮挡住下方的页面内容。
fixed
position:fixed
固定定位就是相对浏览器窗口定位。页面无论如何滚动,这个盒子显示位置不变。