2-6选择题

2-6选择题

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Document</title>

<style type="text/css">

.per{

width: 300px;

height: 300px;

background-color:red;

margin-left: 200px;

margin-top: 200px;

}

.son{

width: 100px;

height: 100px;

background-color: blue;

position:absolute;

left:0;

top:0;

}

</style>

</head>

<body>

<div class="per">

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

</div>

</body>

</html>



求助:这个为什么是会显示在网页的左上角呢?不太理解,以父元素为参照物的话不应该是在父元素的左上角么?困惑中,望解答,谢谢!


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

父元素需设置相对定位,子元素才会相对父元素绝对定位http://img1.sycdn.imooc.com/climg//5960a2a90001c58602870169.jpg

  • 慕虎9595667 提问者 #1
    非常感谢!
    2017-07-09 09:52:52
  • BruinK #2
    所以,脱离常规流的意思也就是,不再受父元素的margin属性的控制了,对吗? 还有就是选项中只有一个左上角,所以我选则了左上角,但事实上题目中这种情况,网页的左上角就是父元素的左上角,试着个意思吗????
    2018-04-14 10:30:02
  • BruinK #3
    我刚才试了一下,的确是网页的左上角,脱离了父元素,所以说,他应该就像开启了新的一层。处于页面的最开始。
    2018-04-14 10:53:30
怎么都被占用了呢 2018-04-15 13:32:47

脱离文档流:即将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当没看到它,两者位置重叠都是可以的。

绝对定位的元素位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。这里最初的包含块是HTML元素,所以top为0,left为0的时候是在页面的左上角

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师