定位属性:使元素脱离正常的文档流,“漂浮”在指定的位置上的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的值可以为负。
css定位
原文地址:http://www.cnblogs.com/-maji/p/7647316.html