定位属性使元素脱离正常的文档流,“漂浮”在指定的位置上的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的值可以为负。

 

posted on 2017-10-10 19:13  云上咖啡  阅读(239)  评论(0编辑  收藏  举报