为了账号安全,请及时绑定邮箱和手机立即绑定

相对于其最接近的一个具有定位属性的父包含块进行绝对定位,有例子吗?

对于教程中的“相对于其最接近的一个具有定位属性的父包含块进行绝对定位”,除了body之外,如果出现了相对的,有哪些呢?

正在回答

3 回答

标签的默认的定位属性是static。这句话的意思是说给父容器设置了除position:static外的其他定位属性如position:relative/absolute/fixed等之后,其子元素就可以相对该父元素进行定位了。举个栗子:

<div  class="grandfather">
  <div class="father">
    <div  class="son"></div>
  </div>
</div>

这段代码如果我的css是这样的话

.grandfather{position:relative;}
.son{position:absolute;}

由于.father没有设置position,其position为默认的static,所以.son的absolute相对的就是.grandfather来进行定位的。设置的top left等值就是相对于.grandfather来设置的。如果你得css样式改为

.grandfather{position:relative;}
.father{position:relative;}
.son{position:absolute;}

则.son的absolute定位就是相对于.father来定位了,left top的值也就是相对于.father来设置的。


不知道我的表达你能理解不~

14 回复 有任何疑惑可以回复我~
#1

GALOHWANG 提问者

多谢。看了你的回答,我是这么理解的。“相对于其最接近的一个具有定位属性的父包含块进行绝对定位”,指的是GRANDFATHER。如果出现类似的嵌套,只要最外层的标签有使用position定位,那么absolute就是相对于这个的,是吗?
2015-02-10 回复 有任何疑惑可以回复我~
#2

wiibil

感谢回答!赞!
2015-03-14 回复 有任何疑惑可以回复我~
#3

qq_一生之久_0

为什么.grandfather和.father这两个的position的值是relative呢?为什么不是absolute?
2016-04-02 回复 有任何疑惑可以回复我~
#4

西地锦 回复 qq_一生之久_0

relative和absolute都可以 。这儿只是举例,实操中肯定是根据需求来的。子元素 absolute 的定位是相对于它的父级元素的,从最接近的父元素开始找,直到存在 position为 relative|absolute|fixed....等的父元素为止 。
2016-05-28 回复 有任何疑惑可以回复我~
#5

人土土zzzzz

非常感谢!
2016-11-04 回复 有任何疑惑可以回复我~
查看2条回复

谢谢大神解释,很清晰。。。。

0 回复 有任何疑惑可以回复我~

感谢了!顶一个

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

相对于其最接近的一个具有定位属性的父包含块进行绝对定位,有例子吗?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信