解析css的position里的relative和absolute的區(qū)別

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:52:02

解析css的position里的relative和absolute的區(qū)別

解析css的position里的relative和absolute的區(qū)別:position有以下屬性：static、inherit、fixed、absolute、relative前三個(gè)好理解好區(qū)分：static：是默認(rèn)狀態(tài)，沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。nherit：從父元素繼承 position

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀解析css的position里的relative和absolute的區(qū)別:position有以下屬性：static、inherit、fixed、absolute、relative前三個(gè)好理解好區(qū)分：static：是默認(rèn)狀態(tài)，沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。nherit：從父元素繼承 position

position有以下屬性：static、inherit、fixed、absolute、relative
前三個(gè)好理解好區(qū)分：
static：是默認(rèn)狀態(tài)，沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
nherit：從父元素繼承 position 屬性的值。
fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。（即滾動(dòng)瀏覽器的時(shí)候，元素永遠(yuǎn)固定顯示在窗口可視區(qū)的某個(gè)位置）。

比較常用而且會(huì)引起初學(xué)者迷惑的是absolute和relative，它倆有什么分別呢？

一、先來看看W3C給的概念

absolute：生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

relative：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

兩者最核心的區(qū)別在于：absolute不受父元素里的其他元素影響，而relative會(huì)受到父元素里的其他元素影響。

二、一張圖看懂a(chǎn)bsolute、relative的差別

解析css的position里的relative和absolute的區(qū)別

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body,div,p{
margin: 0;
padding: 0;
}
#baba {
position: absolute;
left: 50px;
top:50px;
width: 300px;
height: 300px;
background: blue;
}
#baba p{
background:lightblue;
}
#erzi {
position: absolute;
left: 50px;
top:50px;
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body id="body">
<div id="baba">
<p></p>
<div id="erzi">
<p></p>
</div>
</div>
<script>
var baba=document.getElementById("baba"),
erzi=document.getElementById("erzi");
baba.children[0].innerHTML="我是"+baba.id;
erzi.children[0].innerHTML="我是"+erzi.id;
</script>
</body>
</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

解析css的position里的relative和absolute的區(qū)別

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：區(qū)別 absolute css

熱門焦點(diǎn)

解析css的position里的relative和absolute的區(qū)別

解析css的position里的relative和absolute的區(qū)別

解析css的position里的relative和absolute的區(qū)別

最新推薦

猜你喜歡

熱門推薦