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

为什么main加position：relative和不加会有很大的差别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%; height:100px; background:grey; }
.main{width:100%; height:600px; background:red; position:relative;}
.left{width:200px; height:600px; top:0; left:0; position:absolute; float:left; background:blue;}
.right{width:100%; height:600px; margin:0 0 0 210px;  background:green;}
.foot{width:100%; height:100px;  background:orange;}
</style>

</head>

<body>
<div class="top">top</div>
<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>

</body>
</html>

慕斯卡9626126

2015-08-02

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

关注问题我要回答

755

操作

收起

2 回答

六月时光
2015-08-03

加了相对定位啊，效果当然会不一样了......................效果恰好一样而已

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

收起回答

慕斯卡9626126 提问者

main的相对定位在这里具体什么作用啊

2015-08-04 回复有任何疑惑可以回复我~

六月时光回复慕斯卡9626126 提问者

200就能看到效果了。怎么说呢，相对定位的在哪里的作用都是只有一个的，就是拿来布局定位的，移动相应的块状元素。上面你说的实现相同效果是有可能的，因为他们都是拿来布局的，但如果你把那个.left{top:100px}改了就效果不同的。而且你代码里left里面用了绝对定位的话，就不要用左浮动了，因为绝对定位是脱离文档流的，用左浮动是没有效果的。

2015-08-04 回复有任何疑惑可以回复我~

六月时光回复慕斯卡9626126 提问者

相对定位是相对元素本身会出现的地方来定位，移动后，原来位置还是会占有位置，并没有脱离普通文档流，绝对定位是相对浏览器的，是会脱离文档流的。http://www.w3school.com.cn/css/css_positioning_relative.asp这里面有相对定位的详细讲解，http://www.w3school.com.cn/css/css_positioning_absolute.asp这里有绝对定位的详解。定位和浮动都是拿来布局的，是可以实现相同效果的，但什么时候用哪个是有区别的，这个要看你自己了

2015-08-04 回复有任何疑惑可以回复我~

查看2条回复

慕斯卡9626126 提问者
2015-08-02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%; height:100px; background:grey; }
.main{width:100%; height:600px; background:red; }
.left{width:200px; height:600px; top:100px; left:0; position:absolute; float:left; background:blue;}
.right{width:100%; height:600px; margin:0 0 0 210px;  background:green;}
.foot{width:100%; height:100px;  background:orange;}
</style>

</head>

<body>
<div class="top">top</div>
<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>

</body>
</html>

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

收起回答

慕斯卡9626126 提问者

.left{top:100px;}竟然和.main{position:relative;}实现了相同的效果

2015-08-02 回复有任何疑惑可以回复我~