- 相对定位relative:
往往用于父元素,让其他需要定位布局的元素来参照它
参照元素在文档中的原始位置进行偏移,不会脱离文档流
<head>
<style>
div{
width:100px;
height:100px;
border:solid 1px red;
}
#a{
position:relative;
left:5px;
}
</style>
</head>
<body>
<div></div>
<div id="a"></div>
</body>
- 绝对定位absolute:
参照离他最近的已经定位(常常参照相对定位的元素)的祖先元素进行偏移
如果没有祖先元素,则参照窗口进行偏移
脱离文档流
<head>
<style>
div{
width:100px;
height:100px;
border:solid 1px red;
}
#a{
position:relative;
left:5px;
}
#c1{
background-color:blue;
width:10px;
height:10px;
position:absolute;
left:50%;
margin-left:-5px;
}
</style>
</head>
<body>
<div></div>
<div id="a">
<div id="c1"></div>
</div>
</body>
</html>
- 固定定位布局
脱离文档流
参考窗口进行定位,不跟随网页滚动而滚动
<head>
<style>
ul{
padding:0;
margin:0;
list-style-type:none;
overflow:hidden;
}
ul>li{
float:left;
margin:0 10px;
}
#nav{
background-color:blue;
color:white;
position:fixed;
width:100%;
top:0;
left:0;
}
</style>
<body>
<div id="nav">
<ul>
<li>首页</li>
<li>国内</li>
<li>国际</li>
</ul>
</div>
</body>