position属性详解

158 阅读1分钟

我们常用的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;
    }
  }
}

设置粘性定位的注意事项:

  1. sticky===relative&&fixed
  2. 必须要设置top left right bottom 其中一个
  3. 00点父元素的左上角
  4. 粘性定位不可以设置overflow:hidden,否则会失效