.定位
定位的方式有:static-静态定位(默认)、fixed-固定定位、relative-相对定位、absolute-固定定位
div{
width: 200px;
height: 200px;
position: static;
}
首先设置了static,则位置不会发生改变,因为它本身就是默认,没有定位,而且不受letf、right、top、bottom的影响
fixed:固定定位
通常我们在一些网站的左下角或者右下角看到一些广告,无论我们页面下拉到哪里始终都在一个位置显示,就是用的固定定位。
relative:相对定位
<styletype="text/css">
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
top: 30px;
left: 20px;
}
#div3{
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
我们可以将文档流看做在页面上分为一行一行。而上代码运行后显示结果可以看出相对定位是从原有的位置进行位移,而原来的位置还在空着没有被后续的元素补上,说明相对定位没有脱离文档流
absolute:绝对定位
<styletype="text/css">
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 20px;
left: 30px;
}
#div3{
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>