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

关于position absolute

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>混合布局编程挑战</title>

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{height:40px;background:#ccc}

.main{height:400px;background:red;}

.left{width:200px;height:400px;background:blue;}

.right{height:400px;background:green;margin-left:210px;}

.foot{height:40px;background:orange}

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

</html>

为什么、.left里不加position absolute就会变到下面去，而且被footer覆盖？能解释下面，明明只mian的子元素，为什么会到下面了

仰望01

2016-06-24

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

关注问题我要回答

617

操作

收起

3 回答

慕粉3549382 回答被采纳 +3 积分
2016-06-24

我重新测试了下发现我前面说的有误我说的关于为什么left会在main之外是正确的后半部分错误

实际上 left算是处于main所在区域只是显示的时候显示在下面了（因为被right独占一行）那么既然left不存在，foot实际上显示出来是与foot重叠的（文字部分就已经重叠了）。之所以你测试和我的测试结果之前都显示不重叠，因为那是设计窗口，当把代码保存之后，或者使用实时窗口就会发现 foot和left重叠

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

收起回答

仰望01 提问者

前面给.right设置了margin-left，mian前面是不留了足够的空间给left吗，但是left显示还在下面，是不是电脑没有这个智慧啊

2016-06-26 回复有任何疑惑可以回复我~

慕粉3549382
2016-06-24

正好我刚做完这个因为代码里RIGHT 是在LEFT之前的而你的main right是没有width属性的，所以right独占main的一行且拥有margin-left属性，然后left没地方就被挤出来了。但是left本身应该算是在main所在区域。所以在main的两个都是main的子元素没有float属性的话就会这样，这个的话什么原因我也说不好我测试了下，left里的文字影响了foot的位置（如果left中文字是两行，那么foot往下移两行）。这只是我的个人看法和测试结果的猜测。

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

收起回答

无尘a
2016-06-24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>混合布局编程挑战</title>

body{ margin:0; padding:0; font-size:30px; color:#fff}

.boss{width: 800px;height: auto; margin: 0px auto;}

.top{height:40px;background:#ccc}

.main{height:400px;width:800px;background-color: aquamarine;}

.left{width:200px;height:400px;background:blue;float: left;}

.right{height:400px; width:600px;background:green;float: right;}

.foot{height:40px;background:orange;float: none;}

</style>

</head>

<body>

<div class="right">rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright</div>

</div>

</div>

</body>

</html>

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

收起回答