我们常用的position属性有:
position 绝对定位
relative 相对定位
fixed 固定定位
sticky 粘性定位
import React from 'react';
import './styles.less';
export default function Stickly(props) {
return (
<div styleName="aa">
<div styleName="bb">
<div styleName="cc"></div>
<div styleName="dd"></div>
</div>
</div>
);
}
css样式:
.aa {
height: 5000px;
border: 10px solid #f00;
.bb {
height: 500px;
border: 10px solid #000;
margin: 200px 0 0;
.cc {
position: sticky;
top: 0;
background: palevioletred;
height: 80px;
}
.dd {
height: 200px;
background: palegreen;
}
}
}
设置粘性定位的注意事项:
- sticky===relative&&fixed
- 必须要设置top left right bottom 其中一个
- 00点父元素的左上角
- 粘性定位不可以设置overflow:hidden,否则会失效