最接近的一個具有定位屬性的父包含塊
最接近的一個具有定位屬性的父包含塊;其中的定位屬性和父包含塊怎么理解？
SayHiTo
2016-02-21
5 回答
舉報
0/150
提交
取消
2016-03-30
一、所謂定位屬性：
CSS的語法是“元素：{屬性：值}”
具有定位屬性即該元素使用了position屬性，其實此屬性有四個值：
static靜態定位——即頁面流中元素默認的位置
absolute絕對定位
relative相對定位
fixed固定定位
有圖為證，w3school的網站表述如下圖：
貌似扯多了。
二、父包含塊
此處的父包含塊貌似也可以稱作父元素，到底是下面哪一種意思呢？
單純指元素的上一層元素，姑且稱之為爸爸元素
包含元素的所有元素（爸爸元素、爺元素、太爺元素）
做了如下實驗：
上圖中div3（小方框）的爸爸元素是不含定位屬性的div2（中方框），爺爺元素是含定位屬性的div1（大方框）。
如果父包含塊是單指爸爸元素，那么div3（小方框）應該相對于body（頁面）定位，上邊界應與div1（大方框平齊）。
然而并沒有，div3（小方框）最終以爺爺元素為準進行絕對定位。
最終判定父包含塊指包含該元素的所有元素，而實際上body元素從某種意義上講是所有元素（不考慮<html><head>）的父元素，當所有元素都沒有定位屬性時只能以最外層的body為準進行定位了。
有點啰嗦，不知你是否理解。
2016-03-09
明白了
2016-03-09
什么是具有定位屬性的父包含塊？
2016-03-09
我也是這個問題，
2016-02-21
1、參照定位的元素必須是相對定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
? ?<div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>
從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）。
：使用position:absolute可以實現被設置元素相對于瀏覽器（body）設置定位