                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

为什么定位之后没有覆盖main层，还需要设置top：0；

.top{height:100px;background:#ccc;} .main{height:500px; background:red;position:relative;} .left{width:200px; height:500px; background:blue; top:0; position:absolute;} .right{background:green; margin-left:210px; height:500px;} .foot{background:orange;clear:both;} 结尾有没有清除浮动都没有变化呀？还有为什么left需要top：0；？

繁夫

2017-04-12

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

830

操作

收起

2 回答

花森煜米
2017-06-14

1.看情况看结尾是否需要清理浮动。像这个demo，因为main元素设定为相对定位relative，还是普通流，所以footer并不会上移。因此这里可以不需要清理浮动。

2.top: 0;就是相对于它的父元素main的上部距离，设为0就表明靠在左上角。你可以注释掉这句代码，看前后的变化，就理解了。

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

游离态L
2017-04-13

我记得那个初始代码中多了一个 }，所以代码产生了问题，删掉之后就可以了，你那个清楚浮动没错的，top:0是为了让那两个div出现在左上角和右上角如果改为top:100px; 那么就会有100px的距离出现

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

举报

0/150

提交

取消

如何用CSS进行网页布局

参与学习 209624 人
解答问题 1153 个

用最简洁的案例教你布局的那些知识，这是前端工程师基本技能

为什么定位之后没有覆盖main层，还需要设置top：0；

我要回答关注问题

意见反馈帮助中心 APP下载