                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /如何用CSS進行網頁布局

css布局

我只是奇怪為什么在.mian里面一定要有position:relative才行。。

Shipley

2015-12-18

源自：如何用CSS進行網頁布局 5-3

關注問題我要回答

572

操作

收起

2 回答

Brave__heart
2015-12-18

這樣才是相對父元素定位

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

收起回答

李曉健
2015-12-18

因為這樣可以讓他里面的有?position:absolute 元素，相對它來進行定位。

不加也可以，這樣的話?有?position:absolute 元素 ?就相對于根元素來定位

<!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:#ccc;}
.main{background:#f00;height:500px;}
.left{?width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;}
.right{background:#9C9;height:500px;margin-left:210px;}
.foot{width:100%;height:50px;background:#F63;clear:both;}
</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>

這里主要不同就是 left的 top值