问答详情
源自：8-2 慕课网-绝对定位整页布局演示

为什么aside 把header覆盖了？

http://img.mukewang.com/580b14bf0001ff9408490539.jpg

html,body #page{
height:100%;
}
#page{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
header, footer{
position:absolute;
left:0;
right:0;
}
header{
height:150px;
top:0;
}
footer{
height:150px;
bottom:0;
left:0;

}
aside{
width:150px;
position:absolute;
left:0;
top:0;
bottom:0;

}
#content{
position:absolute;
top:150;
bottom:150px;
left:150;
overflow:auto;


提问者：慕粉1628116899 2016-10-22 15:31

个回答

  • 有C
    2016-10-24 12:52:24
    已采纳

    absolute的层级效果，DOM中在后面的absolute元素会覆盖前面的，你这个footer也覆盖了aside,老师课件里演示的也是覆盖了的！你可以header下left距离设置为aside的宽度，最好用百分比，可以自适应！

    0
  • icolors
    2016-11-14 10:36:26

    我试了下和你一样，可以给aside设置margin-top来消除

    1