定位属性:使元素脱离正常的文档流,“漂浮”在指定的位置上的css属性。
position:设置定位属性的方式。
- relative: 相对定位,对象遵循普通流,当前元素参照父元素的左上角进行位置偏移。
- absolute:绝对定位,对象脱离普通流,当前元素偏移属性参照的是离自身最近的相对定位元素,如果没有相对定位的元素,则一直追溯到文档。
- fixed:与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。
- static:对象遵循常规流(默认值)。
1 <style type="text/css"> 2 div{ 3 border: 2px black solid; 4 width: 300px; 5 height: 400px; 6 } 7 #over{/* 绝对定位absolute */ 8 position: absolute; 9 left: 100px; 10 top: 200px; 11 } 12 #container{/* 相对定位relative */ 13 position: relative; 14 left: 500px; 15 top: 100px; 16 } 17 #tips{/* 相对窗口定位fixed */ 18 position: fixed; 19 left: 900px; 20 top: 10px; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="over">div1</div> 26 <div id="container">div2</div> 27 <div id="tips">div3</div> 28 </body>
要使某个元素脱离文档流,“漂浮”在指定位置上用position:absolute。
多个元素堆叠在一起,进行不同的显示需要两者配合使用。z-index的值可以为负。