最接近的一个具有定位属性的父包含块-慕课网

首页课程实战体系课手记专栏慕课教程

最接近的一个具有定位属性的父包含块

来源：13-6 万事无绝对 -层模型之绝对定位

SayHiTo

2016-02-21 15:47

最接近的一个具有定位属性的父包含块;其中的定位属性和父包含块怎么理解？

写回答关注

5回答

Swibinchter

2016-03-30 21:49:53
一、所谓定位属性：
CSS的语法是“元素：{属性：值}”
具有定位属性即该元素使用了position属性，其实此属性有四个值：
1. static静态定位——即页面流中元素默认的位置
2. absolute绝对定位
3. relative相对定位
4. fixed固定定位
有图为证，w3school的网站表述如下图：
貌似扯多了。

二、父包含块
此处的父包含块貌似也可以称作父元素，到底是下面哪一种意思呢？
1. 单纯指元素的上一层元素，姑且称之为爸爸元素
2. 包含元素的所有元素（爸爸元素、爷元素、太爷元素）
做了如下实验：
上图中div3（小方框）的爸爸元素是不含定位属性的div2（中方框），爷爷元素是含定位属性的div1（大方框）。
如果父包含块是单指爸爸元素，那么div3（小方框）应该相对于body（页面）定位，上边界应与div1（大方框平齐）。
然而并没有，div3（小方框）最终以爷爷元素为准进行绝对定位。
最终判定父包含块指包含该元素的所有元素，而实际上body元素从某种意义上讲是所有元素（不考虑<html><head>）的父元素，当所有元素都没有定位属性时只能以最外层的body为准进行定位了。

有点啰嗦，不知你是否理解。
0 6
逆光_0001

2016-03-09 11:17:07

明白了

0 0
逆光_0001

2016-03-09 10:38:05

什么是具有定位属性的父包含块？

0 0
逆光_0001

2016-03-09 10:34:51

我也是这个问题，

0 0
邻家慕公子

2016-02-21 16:19:52

1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1">
<div id="box2">相对参照元素进行定位</div>
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位

1 0

逆光_000...

#div1{ width:400px; height:200px; border:2px solid red; position:absolute; top: 80px; left:80px; } #div2{ border:2px dashed gray; position:absolute; top:50px; right:50px; }

2016-03-09 11:19:59

共 1 条回复 >