Position知识点总结

最新推荐文章于 2024-09-14 15:26:51 发布

Panda-6

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量129

点赞数 2

分类专栏：前端文章标签： css3 css 前端

本文链接：https://blog.csdn.net/m0_48949881/article/details/122371825

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

position的含义是指定位类型，值分别可以是：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。

position: static(默认）

static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.

position:relative(相对定位)

此处的相对并不是相对于哪个父div或子div，相对只是相对于自身原本的位置发生变化。

position:absolute(绝对定位)

absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父级来定位；

如果父级都没有position属性，则相对于document来定位最多也就到body；

使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；
元素是不可以同时使用绝对定位和浮动的。

position:fixed(固定定位–相对于浏览器窗口)

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定.
也是脱离了文档流，与absolute一样，可以设置宽高，但是父级会检测不到定位元素的宽高，所以无法由子元素撑开。
元素是不可以同时使用fixed定位和浮动的。

inherit

继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

sticky (黏性定位,吸顶效果)

position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .top,
      .foot {
        width: 100%;
        height: 200px;
        background: red;
        border: 1px solid black;
      }
      .sticky {
        width: 100%;
        height: 100px;
        position: sticky;
        top: 0;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="top"></div>
    <div class="top"></div>
    <div class="top"></div>
    <div class="sticky"></div>
    <div class="foot"></div>
    <div class="foot"></div>
    <div class="foot"></div>
    <div class="foot"></div>
    <div class="foot"></div>
  </body>
</html>