position之absolute中left、bottom、top、right與width、height的關係
阿新 • • 發佈：2019-01-21
1、在網頁設計中我們經常遇到寬度自適應，但有時候可能一種高度自適應的問題。這個時候我們的position之absolute就可以幫你了。
2、position之absolute是脫離文件流。當width、height設定某值後，該元素的值就是該值。那width、height沒有設定的時候呢？
3、該元素的witdh、height會根據父元素（需設定position:relative，沒有則按瀏覽器作為父元素）的width、height和該元素left、bottom、top、right而改變。
公式：
該元素的witdh = 父元素的width-top-bottom；
該元素的height= 父元素的height-left-right；
該元素位置(該元素left，該元素top)；
廢話不多說，上圖！
html：
| 1 2 3 4 5 6 |
<body>
<div class="container">
<div class="B">
</div>
</div>
</body>
|
css：
| 1 2 |
.container
{width: 600px;height: 600px;background: #999999;position: relative;}
.B
{ background: #D9C666; position: absolute; top: 5
|
| 1 |
0px ; left: 100px ; bottom: 100px; right: 100px;
}
|
效果：
4、假如有一高度自適應的div，父元素高度300px，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度
html:
| 1 2 3 4 5 6 |
<div class="container">
<div class="A">
</div>
<div class="B">
</div>
</div>
|
css:
| 1 2 3 |
.container
{width: 600px;height: 300px;background: #999999;position: relative;}
.A
{ height: 100px; background: #BBE8F2;
}
.B
{ width:100%;background: #D9C666; position: absolute; top: 100px ; left: 0 ; bottom: 0;
}
|
效果：
就這麼簡單的完成！