淺談css position absolute相對于父元素的設(shè)置方式
發(fā)布時間：2019-10-10 15:01:02 作者：手指樂 
我要評論
我要評論這篇文章主要介紹了淺談css position absolute相對于父元素的設(shè)置方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
大家知道css的position absolute默認是根據(jù)document來設(shè)置的，比如position:absolute后設(shè)置left:0;top:0這時候元素會顯示到頁面的左上角。
有時候我們需要在父元素的容器內(nèi)設(shè)置相對的絕對位置
要做到這一點需要把父元素的position屬性設(shè)置為relative，設(shè)置為relative之后不設(shè)置left和top屬性，這時候父元素雖然是relative的，但是還是在原來位置。 然后把子元素的位置position設(shè)置為absolute的，并設(shè)置其left，top，right，bottom屬性，這樣就是相對于父元素的絕對位置了。
如下html示例代碼：
<!doctype html>
<html>
<style type="text/css">
#father {
position: relative;
width:600px;
margin:auto;
height:400px;
border:1px solid red;
}
#son1 {
position: absolute;
top: 0;
background:#f0f0f0;
}
#son2 {
position: absolute;
bottom: 0;
background:blue;
}
</style>
<body>
<div id="father">
<div id="son1">I am son1</div>
<div id="son2">I am son2</div>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
css position屬性為absolute時其百分值的計算
這篇文章主要介紹了css position屬性為absolute時其百分值的計算,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2019-08-06- 下面小編就為大家?guī)硪黄狢SS position:absolute全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-20
- positon有4個屬性:static relative absolute fixed，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又2014-11-28
css中position屬性(absolute|relative|static|fixed)概述及應(yīng)用
position屬性的相關(guān)定義：static：無特殊定位，對象遵循正常文檔流;relative：對象遵循正常文檔流;absolute：對象脫離正常文檔流fixed：對象脫離正常文檔流，有興趣的朋友2013-04-08CSS position屬性absolute relative等五個值的解釋
目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是w3school對position五個值的2012-12-15
