課程
/前端開發
/HTML/CSS
/初識HTML(5)+CSS(3)-升級版
我是這樣理解的,絕對定位就是div移開了,然后被后面的子元素代替了或者說被另外一個div代替了,
而相對定位就是div位置移動了,但是原來的位置不會被別的子元素或者div代替是預留給自己的。(我這樣理解對嗎?新人求解)
2020-02-26
源自:初識HTML(5)+CSS(3)-升級版 13-7
正在回答
絕對定位不是相對于瀏覽器窗口進行偏移嗎(開始懷疑自己所學知識)
幕布斯5013342 提問者
把這道題答案中的position:relative; 改成position:absolute;? 你大概就能發現其中的微妙區別了。
在absolute 模型中對<div>位置更改會對其他標簽的位置產生影響,但是relative模型相當于在原有的頁面上,加了一個濾鏡層(top layer);
然后在以之前的坐標為起始點,無論怎樣移動,這個層面都只有自己一個標簽,自然也就不會影響其他原始層頁面上的相鄰標簽了。
絕對定位:脫離文檔流,相對于離他最近的具有定位屬性的父元素偏移
相對定位:不脫離文檔流,相對于它本身原來的位置進行偏移
固定定位:脫離文檔流,相對于瀏覽器窗口進行偏移
絕對定位,就近原則,即:最近的一個父元素使用了position除static值以外的定位,如果沒有找到則參照body。我這么理解的。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>relative樣式</title>
? ? <style type="text/css">
? ? #div1 {
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? border: 2px red solid;
? ? ? ? position:relative;
? ? ? ? left:100px;
? ? ? ? top:50px;
? ? }
? ? </style>
</head>
<body>
? ? <div id="div1"></div>
</body>
</html>
相對定位就是相對于自己本身而改變的位置,只隨自己上一次的位置發生改變。
絕對定位是相對于最近的已定位的父元素發生位置改變,如果沒有已定位的,那么就會相對于body,絕對定位也會脫離文本流
絕對位置是相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對于body元素,即相對于瀏覽器窗口。對上一節中的<div>標簽來講,他沒有父級元素,所以是相對于<body>標簽,即瀏覽器窗口進行丁文。
相對元素則是相對與該元素先前的位置去定位
舉報
HTML(5)+CSS(3)基礎教程8小時帶領大家步步深入學習標簽用法和意義
3 回答層模型中相對定位和絕對定位區別
2 回答絕對定位?和相對定位
1 回答相對定位和絕對定位
6 回答絕對定位和相對定位
2 回答絕對定位,相對定位
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2020-02-26
絕對定位不是相對于瀏覽器窗口進行偏移嗎(開始懷疑自己所學知識)
2020-09-23
把這道題答案中的position:relative; 改成position:absolute;? 你大概就能發現其中的微妙區別了。
在absolute 模型中對<div>位置更改會對其他標簽的位置產生影響,但是relative模型相當于在原有的頁面上,加了一個濾鏡層(top layer);
然后在以之前的坐標為起始點,無論怎樣移動,這個層面都只有自己一個標簽,自然也就不會影響其他原始層頁面上的相鄰標簽了。
2020-09-06
絕對定位:脫離文檔流,相對于離他最近的具有定位屬性的父元素偏移
相對定位:不脫離文檔流,相對于它本身原來的位置進行偏移
固定定位:脫離文檔流,相對于瀏覽器窗口進行偏移
2020-07-06
絕對定位,就近原則,即:最近的一個父元素使用了position除static值以外的定位,如果沒有找到則參照body。我這么理解的。
2020-05-07
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>relative樣式</title>
? ? <style type="text/css">
? ? #div1 {
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? border: 2px red solid;
? ? ? ? position:relative;
? ? ? ? left:100px;
? ? ? ? top:50px;
? ? }
? ? </style>
</head>
<body>
? ? <div id="div1"></div>
</body>
</html>
2020-03-24
相對定位就是相對于自己本身而改變的位置,只隨自己上一次的位置發生改變。
絕對定位是相對于最近的已定位的父元素發生位置改變,如果沒有已定位的,那么就會相對于body,絕對定位也會脫離文本流
2020-03-12
絕對位置是相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對于body元素,即相對于瀏覽器窗口。對上一節中的<div>標簽來講,他沒有父級元素,所以是相對于<body>標簽,即瀏覽器窗口進行丁文。
相對元素則是相對與該元素先前的位置去定位