css定位布局-position

定位-position

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过*或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移

属性值

• static：默认值，没有定位，元素出现在正常的文档流中，这时给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的
• relative：相对定位
• absolute：*定位
• fixed：固定定位

相对定位（relative）

生成相对定位的元素他会跟其它的元素一样，出现在文档流中它该出现的位置，可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意， 在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。元素的位置通过 "left", "top", "right" 以及"bottom" 属性进行规定

实例

<div class="main"></div> 
<style> 
 .main{ 
 position: relative; 
 left: 10px; 
 top: 2px; 
 } 
</style>

*定位(absolute)

*定位使元素的位置与文档流无关，因此不占据空间。 生成*定位的元素，相对于 static 定位以外的*个父元素（body）进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

实例

<div class="main"></div> 
<style> 
 .main{ 
 position: absolute; 
 left: 10px; 
 top: 2px; 
 } 
</style>

固定定位(fixed)

生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以"bottom" 属性进行规定

实例

<div class="main"></div> 
<style> 
 .main{ 
 position: fixed; 
 left: 10px; 
 top: 2px; 
 } 
</style>

相对定位和*定位

父元素使用相对定位，子元素使用*定位后，这样子元素的位置不在浏览器左上角，而是相对于父容器左上角。

实例

<div class="main"> 
 <div clsss="box">内容</div> 
</div> 
<style> 
 .main{ 
 position: relative; 
 } 
 .main .box{ 
 position: absolute; 
 left: 10px; 
 top: 2px; 
 } 
</style>

z-index

当多个元素添加*定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次

注意：z-index 仅能在定位元素上奏效（例如 position:absolute;）！；元素可拥有负的 z-index 属性值

说明：：一般元素为普通流，普通流的z-index默认为0，脱离了普通流，在普通流之上（定位，浮动）z-index为0-1之间。如果将z-index值设置为大于或者等于1，元素将会在定位或者浮动流之上

实例

<style> 
 div{ 
 width: 400px; 
 height: 200px; 
 } 
 .div1{ 
 width: 1000px; 
 height: 600px; 
 background-color: #f00; 
 position: relative; 
 } 
 .div2{ 
 background-color: #0f0; 
 position: absolute; 
 z-index: 2; 
 } 
 .div3{ 
 background-color: #00f; 
 position: absolute; 
 z-index: 3; 
 } 
</style> 
<div class="div1"> 
 <div class="div2"></div> 
 <div class="div3"></div> 
</div>