通常我们认为CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位,如果要想相对当前元素的父元素来定位,父元素一定要设置position:relative。前面一句是没有问题的,在没有父元素设置定位的话,默认就是以body来定位的,但是后面一句,要想相对父元素定位,父元素必须设置相对定位(relative),实际测试这句有些问题
正确的理解是:
1.相对定位:相对于块级元素(或行内块)自身位置进行定位;
2.绝对定位:绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body);给父元素设置position:relative/absolute/fixed均可,若想避免子元素溢出父元素,结合overflow:hidden使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
500px;
height: 500px;
margin: 50px auto;
background: #cccccc;
position: relative;
}
.content{
100px;
height: 100px;
background: red;
position: absolute;
top:10px;
left:10px;
}
.son{
50px;
height: 50px;
background: blue;
position: absolute;
top: 10px;
left: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="son"></div>
</div>
</div>
</body>
</html>