一、参数和属性
1、定位的五个属性
2、相对定位reletive
注意:相对定位设置top后,还占着空白位置,可通过margin去掉空白位置。
如:top:-40px;margin-bottom: -40px;
3、绝对定位absolute
4、固定定位
5、粘滞定位
二、一个div在另一个div中实现绝对定位(结合相对定位)
1、错误图:绝对定位,子div跳出父div,以浏览器的上边距、左边距定位
2、解决后的图,使得子div相对父div设置定位位置
通过在父div,加上,position: relative; /* 父div设置相对定位,子div的绝对定位不会跳出圈 */
3、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.box1 {
height: 50px;
width: 200px;
background-color: rgb(206, 204, 204);
}
.box2 {
width: 300px;
height: 200px;
background-color: rgb(209, 233, 209);
position: relative; /* 父div设置相对定位,子div的绝对定位不会跳出圈 */
}
.box3 {
width: 150px;
height: 150px;
background-color: rgb(245, 196, 169);
position: absolute;
top: 30px; /* 顶部30像素 */
left: 100px;
}
</style>
<body>
<div class="box1">第1个DIV</div>
<div class="box2">
父div
<div class="box3">子DIV</div>
</div>
</body>
</html>