css绝对定位的重新认知
- 所谓的css绝对定位,就是 position:absolute;
- 这里记录一个我的错误认知,就是 绝对定位的参照物是 内容,还是 内容+内边距,我一直以为 参照物就是内容,但是实际上参照物是 内容+内边距
- 看看下面的事例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>css绝对定位的重新认知</title>
<style>
.box{
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 400;
color: #fff;
background-color: cornflowerblue;
position: relative;
}
.son{
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box">this is a box
<div class="son"></div>
</div>
</body>
</html>
- 你可以想到效果是这样的
- 但是如果给 box添加了 padding,那么绝对定位是怎样的,在 .box类中添加 padding: 50px;,来看看效果
- 可能你会疑惑,那边框呢,可以试试,在 .box类中添加边框 border: 50px solid hotpink;
来看看效果
- 可以看见并没有包含边框,因此 css绝对定位的参照物就是 内容+内边距