为什么box1中position改为absolute后，box3和box4挪到了页面最上方？（如下图）
loveyoubaxia
2016-05-16 14:42
#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;
}
6回答
-
- 慕无忌2415991
- 2016-05-16 15:40:06
首先你得搞清楚参照定位元素的意思和它们参照的对象，如果明白了这个两个之后，也就不难理解了。relative是相对于其他元素的布局，而absolute是相对于浏览器布局，但是有一点要注意：如果要使另外的一个元素有参照价值，就必须加入relative。这就是为什么你把box1的position改为absolute后，虽然box3的没改，两个块元素还是重叠了。简单的说就是：box1的参照对象是浏览器，box3的参照对象是其他的元素，这两个是不同的层面，只能重叠
-
- 自由枉自在
- 2016-06-14 10:03:55
box1设置为absolute时,相对父元素body，也就是浏览器窗口偏移，原来位置也不能保留，从标题元素开始向上移动，或者可以理解为，设置成absolute 后，元素被抽出来作为图层相对于父元素浮动。因此显示如此。
另外还有两点需要注意：
1.子元素要想相对于父元素偏移，子元素需要设置偏移量，至少要设置一个值，哪怕为0 才能起到偏移效果，比如top:0px;
2.父元素设置成absolute，子元素依然能偏移，只不过父元素也会相对于其父元素偏移，也就是后面如果有其他元素 会占据原有位置而重合，也就是说层模型这可以嵌套。
-
- dapeng_0001
- 2016-06-04 14:15:26
box1设置为relative时原来位置保留，但是设置为absolute绝对时就跟原来没有任何关系当然也不再占有原来的位置，又因为box1和box2是平级的，所以会重叠在一起！
-
- blues祁
- 2016-05-29 23:30:20
因为box1和box3是平级的，没有包含关系，所以如果两个都用absolute定位的话，则他们都是相对于浏览器定位，所以就重叠在了一起
-
- 姜2
- 2016-05-16 15:36:11
层模型 一层一层的
absolute决对布局 你可以不设置值演示一下 都是在左侧顶部
-
- 慕粉3221184
- 2016-05-16 15:08:22
因为absolute是绝对路径
初识HTML(5)+CSS(3)-升级版
1225813 学习 · 18234 问题
相似问题