巧用 position:absolute

1、跟隨性

 

下面這種方法更加簡便以及更方便維護，

例如“西部世界”，由於不用將父元素設為position:relative,position:absolute的位置也就不用根據文字多少而重新進行top、left等位置的計算。

<div class="item1">西部世界<i></i></div>
<div class="item2">
      <i></i>
      <img src="images/orange.jpg" alt=""><!--
      --><i></i>
</div>

.item1 i {
    position: absolute;
    background: url(images/hot.png) 0 0 no-repeat;
    width: 30px;
    height: 16px;
    margin: -6px 0 0 2px;
}
.item2 i:nth-child(1) {
    position: absolute;
    background: url(images/free-appointment.png) 0 0 no-repeat;
    width: 56px;
    height: 56px;
    margin: 0;
}

.item2 i:nth-child(3) {
    position: absolute;
    background: url(images/flag_niuzhuan.jpg) 0 0 no-repeat;
    width: 64px;
    height: 20px;
    margin-left: -64px;
　　overflow:hidden;
　　text-indent: -9em;
}

/*如果用文字不用圖片*/
/* .item2 i:nth-child(1) {
　　　　position: absolute;
　　　　line-height:20px;
　　　　background-color: #f60;
　　　　padding: 0 5px;
　　　　font-size: 12px;
　　　　color: #fff;
} */

 

2、沒有寬度沒有高度，實現寬高滿屏效果

 

 上圖是一個全屏的遮罩層，沒有定義寬和高

<div class="mask"></div>

.mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(51, 51, 51,.5);
}

 

position: absolute;top: 0;left: 0;width: 50%; == position: absolute;top: 0;left: 0;right: 50%;

實現距離右側200像素的全屏自適應的容器層 position: absolute;left: 0;right: 200px;
但是width只能用css3 cale計算  position: absolute;left: 0;width: cale(100%-200px);

寬50%，上下鋪滿 width: 50%;position: absolute;top: 0;bottom: 0;


3、高度自適應布局

 

<div class="page">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

 

.page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.list {
    background: #ECA7A5;
    width: 33.3%;
    height: 33.3%;
    border-radius: 50%;
    float: left;
    position: relative;
}

 

 4、如果尺寸限制、拉伸以及margin:auto;同時出現，就會出現絕對定位元素的絕對居中效果！

<div class="item3"><img src="images/orange.jpg" alt=""></div>

.item3 {
    position: absolute;
    left: 0;
    right: 0;
    width: 200px;
    margin: auto;
}