1. 相对定位

    没有脱离文档流,相对于原来的位置。

      position: relative;
                  top: 20px;
                  right: 20px;
  2. 绝对定位

    脱离文档流了,(相对于父元素。一般是以<body>为参考的,但若父容器设置了相对或者绝对定位,就以父元素为主)(控制堆叠顺序 ( z-index )注意,没有单位·`)

       position: absolute;
                  top: 20px;
                  left: 20px;
  3. 固定定位

    脱离文档流了,(相对于浏览器窗口,设置后,不管滚动条怎么滚动,位置都在不变 。)

        position: fixed;
                  top: 20px;
                  left: 20px;
  4. 黏性定位(当页面滚动未超出目标区域时,它的行为就像 position:relative; 。当页面滚动超出目标区域时,它的表现就像 position:fixed; ,它会固定在目标位置。当元素位置固定在目标区域时,会受其直接父元素影响)

    position: sticky;
                  top:60px;
                  left: 30px;

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐