position:static|relative|absolute|fixed
大家下面示例代码先放在浏览器上跑,感性认识一下
-
static 默认值 (你啥都没有设置的时候就是默认值)没有脱离文档流
-
relative
设置了relative的元素会相对于自身原来在文档流的位置进行定位,不会影响其他元素的位置,
<style> * { padding: 0; margin: 0; } body { height: 100%; } ul, li { list-style: none; } .item { border: 1px solid red; margin-top: 10px; background-color: aqua; } </style> </head> <body> <ul> <li class="item">我是第1项</li> <li class="item">我是第2项</li> <li class="item">我是第3项</li> <li class="item" style="position: relative;top:20px;left:20px;">我是第4项</li> <li class="item">我是第5项</li> <li class="item">我是第6项</li> </ul> </body>
-
absolute
-
设置了 top、left 值时,元素是相对于最近的定位上下文来定位的(定位上下文这玩意儿下文解释)
-
脱离文档流了, 导致父元素坍塌了
-
包裹性:p元素宽度本来是整个屏幕的宽度,现在只是内容的宽度
<style> * { padding: 0; margin: 0; } ul, li { list-style: none; } .item { border: 1px solid red; margin-top: 10px; background-color: aqua; } </style> </head> <body> <ul> <li class="item">我是第1项</li> <li class="item">我是第2项</li> <li class="item">我是第3项</li> <li class="item" style="position:absolute;left:20px;top:20px;">我是第4项</li> <li class="item">我是第5项</li> <li class="item">我是第6项</li> </ul> </body>
-
-
fixed
相对于浏览器的窗口的位置来定位的
<style> * { padding: 0; margin: 0; } body { height: 100%; } ul, li { list-style: none; } .item { border: 1px solid red; margin-top: 10px; background-color: aqua; } .container { border: 2px solid black; } </style> </head> <body> <ul class="container"> <li class="item">我是第1项</li> <li class="item">我是第2项</li> <li class="item">我是第3项</li> <li class="item" style="position: fixed;top:20px;left:20px;">我是第4项</li> <li class="item">我是第5项</li> <li class="item">我是第6项</li> </ul> </body>
定位上下文
- relative元素定位永远是相对于元素自身的,以自身为定位上下文
- fixed元素是相对于window(或者iframe)边界的,和其他元素没有关系。但是具有破坏性,
影响其他元素的排列
- absolute:浏览器会递归的查找元素的所有父级元素,如果找到了一个为position: relative|absolute|fixed的元素,就以该元素为基准定位,如果没有找到,就以浏览器的边界为定位。