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