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

为什么box1中position改为absolute后,box3和box4挪到了页面最上方?(如下图)

#box1{

    width:200px;

    height:200px;

    position:absolute;

          

}

#box2{

  position:absolute;

top:20px;

left:30px;

          

}

/*下面是任务部分*/

#box3{

    width:200px;

    height:200px;

    position:relative;      

}

#box4{

    width:99%;

    bottom:0;

  position:absolute;

    

}

http://img1.sycdn.imooc.com//57396ba600015d6903510405.jpg

正在回答

6 回答

首先你得搞清楚参照定位元素的意思和它们参照的对象,如果明白了这个两个之后,也就不难理解了。relative是相对于其他元素的布局,而absolute是相对于浏览器布局,但是有一点要注意:如果要使另外的一个元素有参照价值,就必须加入relative。这就是为什么你把box1的position改为absolute后,虽然box3的没改,两个块元素还是重叠了。简单的说就是:box1的参照对象是浏览器,box3的参照对象是其他的元素,这两个是不同的层面,只能重叠

5739794b0001ca3e03630026.jpg

5739794b00014dba02710034.jpg


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

loveyoubaxia 提问者

非常感谢!
2016-05-18 回复 有任何疑惑可以回复我~
#2

慕粉3442477 回复 loveyoubaxia 提问者

position:absolute会使元素从文档流中脱离出来,原位置会丢失,所以box3会挤占box1原来的位置!
2016-06-08 回复 有任何疑惑可以回复我~

box1设置为absolute时,相对父元素body,也就是浏览器窗口偏移,原来位置也不能保留,从标题元素开始向上移动,或者可以理解为,设置成absolute 后,元素被抽出来作为图层相对于父元素浮动。因此显示如此。

另外还有两点需要注意:

1.子元素要想相对于父元素偏移,子元素需要设置偏移量,至少要设置一个值,哪怕为0 才能起到偏移效果,比如top:0px;

2.父元素设置成absolute,子元素依然能偏移,只不过父元素也会相对于其父元素偏移,也就是后面如果有其他元素 会占据原有位置而重合,也就是说层模型这可以嵌套。



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

box1设置为relative时原来位置保留,但是设置为absolute绝对时就跟原来没有任何关系当然也不再占有原来的位置,又因为box1和box2是平级的,所以会重叠在一起!

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

因为box1和box3是平级的,没有包含关系,所以如果两个都用absolute定位的话,则他们都是相对于浏览器定位,所以就重叠在了一起

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

层模型  一层一层的

  absolute决对布局 你可以不设置值演示一下 都是在左侧顶部

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

因为absolute是绝对路径

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

举报

0/150
提交
取消

为什么box1中position改为absolute后,box3和box4挪到了页面最上方?(如下图)

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