css4种布局技巧-position

position属性

1.说明

position属性和float一样，也是一种使元素脱离文档流的属性

position： static | relative | absolute | fixed |inherit

①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

②relative ：相对定位；文档流的布局不变，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

④static ：默认值；默认布局。

辅助属性：

position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)：

①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。

②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。

③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。

④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。

上面属性的值可以为负，单位：px

2.对于四种定位属性的解释

对于以下代码

<div  style="border: solid 5px #333; width:300px;">
        <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:right; ">
        </div>
        <div id="greenBox" style="height: 120px; width: 100px; background-color: Green;">   
        </div>
        <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>

出现图一

（static作为默认布局，不作解释）

2.1使用relative属性

相对定位；文档流的布局不变，只改变自身位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置，可以覆盖其他元素。

然后将greenBox设置为position:relative; left:180px ;top:10px;会出现图二

 

  

                 　　 图一

      

　　　　　　　　图二  

　　　　　　　　图三

 

2.2使用absolute属性

绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

然后将greenBox设置为position:absolute; left:180px ;top:10px;会出现图3

 

这里可能会发现，图三top和relative间距是不同的，然而top都是10px，这是为什么呢？

重新回到对绝对定位的理解

绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

看标红的那句话，这也就是说，position的位置是相对于body而言的，然而最外面的box和body距离10px，所以他们顶部才会重合

 

将父元素的position设置为relative或者absolute  则会出现图四

                   图四

绝对定位上的垂直居中问题

对于盒子模型，应该有很深的理解，盒子模型可以对定宽元素使用margin:0  auto;来做到水平居中；

但是对于垂直居中，使用类似的方法margin: auto 0;却做不到，这是因为垂直方向上的外边距等于零css会自动解读为margin-top:0；

 

然而在absolute属性中，垂直居中得到了一种很好的解决方式

使用{left:0; right : 0; margin:0 auto;}可以得到水平居中，

使用{top:0; bottom:0;margin: auto 0; }可以得到垂直居中，

同样的，使用{left:0; right : 0;top:0; bottom:0; margin: auto ;}可以得到垂直水平同时居中。

<div style="border: solid 5px #333;position:absolute;height:300px; width:300px;">
 
        <div id="greenBox" style="height: 120px; width: 100px; background-color: Green;position:absolute;  ; left:0; right:0;top:0;bottom:0; margin: auto;"> absolute       
        </div>
  
</div>

2.3使用fixed属性

固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

fixed是相对与浏览器窗口的，也就是固定在屏幕的某个位置，不能随着滚动条移动。

 

 

3.相关属性overflow，z-index

overflow: scroll | hidden

scroll,超出元素块的内容以滚动条显示，

hidden:超出部分隐藏

z-index：<integer>

因为position属性的元素可以相互遮盖，所以需要z-index属性来改变默认的覆盖先后顺序。