首頁 > 開發者 > JavaScript
一張圖看懂css的position裡的relative和absolute的區別，positionrelative
position有以下屬性：static、inherit、fixed、absolute、relative
前三個好理解好區分：
static：是預設狀態，沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
nherit：從父元素繼承 position 屬性的值。
fixed：產生絕對位置的元素，相對於瀏覽器視窗進行定位。（即滾動瀏覽器的時候，元素永遠固定顯示在視窗可視區的某個位置）。
比較常用而且會引起初學者迷惑的是absolute和relative，它倆有什麼分別呢？
一、先來看看W3C給的概念
absolute：產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。
relative：產生相對定位的元素，相對於其正常位置進行定位。
兩者最核心的區別在於：absolute不受父元素裡的其他元素影響，而relative會受到父元素裡的其他元素影響。
二、一張圖看懂absolute、relative的差別
代碼：
<!DOCTYPE html><html><head lang="en"><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>View CodeStart building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
