position
static
- 是元素默认的position的值
- absolute不会将其视为已定位的祖先元素
relative
- 相对自身原本文档流发生位移，但不脱离文档流
- 不会对文档流其它布局产生影响
absolute
- 从文档流中删除
- 只由父级元素位置、top、left等决定元素位置
从文档流删除的意思是，一旦一个元素定为absolute，那么对文档流的样式，比如align-item: center，会对该元素不起作用。
sticky
- 相对最近已定位父级
- 会遵循文档流，在滚动时保持在适口内的特定位置
子绝父相
父级相对定位，子级绝对定位，父级相对定位：
.parent {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 10px;
position:relative;
}
.child {
background-color: lightblue;
width: 30px;
height:30px;
margin:auto;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%)
}
媒体查询
<style>
@media screen and (max-width: 768px) {
body {
font-size: 10px;
}
}
.parent{
font-size: 2rem;
}
.child{
font-size: 2em;
}
</style>
<body>
11111
<div class="parent">
应用rem
<div class="child">
应用em
</div>
</div>
</body>
@media查询屏幕尺寸，应用不同的尺寸- rem相对于根元素设置字体大小
- em相对于最近的父级元素
- vh，vw相对于视口设置宽高
覆盖默认 top 和 bottom 定位样式
想要实现一个距离视口下边距一定的弹窗，正常来讲这样实现就够了：
.dialog{
position: fixed;
bottom: 20px
}
但是 antd 中的 modal 有默认的上边距 top 100px， 导致优先级较低的下边距不生效。 可以设置为 top: auto 或者 top: unset 来取消上边距定位。
