CSS定位详解

最新推荐文章于 2024-05-15 13:58:29 发布

阿鼎0815

最新推荐文章于 2024-05-15 13:58:29 发布

阅读量206

点赞数

文章标签： css 定位

本文链接：https://blog.csdn.net/weixin_45432736/article/details/109492436

版权

position 属性分为 static，relative，absolute，fixed，sticky ，inherit6种

本文涉及文档流基础概念。

文档流（百度百科）：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)

1.static（英文释义：静止的; 静态的; 停滞的; ）

不设置position属性的元素，默认position:static，static属性下设置top,left,right,bottom.z-index无效。元素处于正常文档流中

如下图验证left,top,bottom,right属性无效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="div1">
      <div class="div2"></div>
    </div>
  </body>
</html>
<style>
  .div1 {
    width: 100vw;
    height: 500px;
    background: red;
  }
  .div2 {
    width: 50%;
    height: 300px;
    background: green;
    top: 10px;
    left: 10px;
  }
  
</style>

在这里插入图片描述

接下来验证z-index属性无效

我们新增了元素div3，并给父元素div1添加了relative属性。不然absolute定位的div3会相对与祖先中第一个position不为static的元素进行定位，如果不存在这样的父元素，就以最外层的body为参照，进行定位。

现在让div3遮挡div2，并给div2更大的z-index，看看div2能不能从下面上来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="div1">
      <div class="div2"></div>
      <div class="div3"></div>
    </div>
  </body>
</html>
<style>
  body {
    margin: 0;
  }
  .div1 {
    position: relative;
    width: 100vw;
    height: 500px;
    background: red;
    z-index: 100;
  }
  .div2 {
    width: 50%;
    height: 300px;
    background: green;
    z-index: 32;  //更大的z-index 更大的z-index 更大的z-index
    top: 10px;
    left: 10px;
  }

  .div3 {
    position: absolute;
    width: 50%;
    height: 300px;
    background: blue;
    z-index: 22; //更小的z-index 更小的z-index 更小的z-index
    top: 30px;
    left: 30px;
  }
</style>

在这里插入图片描述
结果表明，div2没能上来，position:static下，z-index设置无效

2.relative（英文释义：相比较而言的;比较的; 相对的; 相关联的; ）

相对于元素position:staticd定位的位置，进行top，left，right，bottom相对定位，

元素仍保持其未定位前的形状，它原本所占的空间仍保留，不脱离文档流

还是以上面的div1和div2作为示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="div1">
      <div class="div2"></div>
    </div>
  </body>
</html>
<style>
  body {
    margin: 0;
  }
  .div1 {
    position: relative;
    top: 50px;
    left: 50px;
    width: 100vw;
    height: 500px;
    background: red;
    z-index: 100;
  }
  .div2 {
    position: relative;
    top: 10px;
    left: 10px;
    width: 50%;
    height: 300px;
    background: green;
    z-index: 32;
  }
</style>

在这里插入图片描述
如上图所示，div1相对于body进行了相对定位，div2相对于div1进行了相对定位。

我们把之前的div3加回来
在这里插入图片描述
这一次绿色的，拥有更大z-index的div1就在上面一层了

3.absolute（英文释义：完全的; 全部的; 绝对的; ）

相对于第一个position定位不是static的元素进行定位，如果都没有，就相对于body进行定位，元素脱离了文档流，不再占据空间。

内联元素设置position则会自动变成块状

现在我们将div2修改为span

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="div1">
      <div style="background: blue; width: 100%; height: 100px"></div>
      <div style="background: yellow; width: 100%; height: 100px"></div>
      <div style="background: orange; width: 100%; height: 100px"></div>
      <div style="background: blanchedalmond; width: 100%; height: 100px"></div>
      <span class="div2"></span> 
    </div>
  </body>
</html>
<style>
  body {
    margin: 0;
  }
  .div1 {
    position: relative;
    top: 50px;
    left: 50px;
    width: 100vw;
    height: 500px;
    background: red;
    z-index: 100;
  }
  .div2 {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50%;
    height: 300px;
    background: green;
    z-index: 32;
  }
</style>

在这里插入图片描述
如上图所示，span内联元素div2已经完全不会影响到其他各色div的布局与排版了，飘飘然如遗世独立

4.fixed（英文释义：固定的; 不变的; 不能变的; 不易改变的; ）

fixed和absolute只有一点不同，就是fixed是相对于浏览器可视窗口进行定位，注意是浏览器。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="div1">
      <div style="background: blue; width: 100%; height: 20%"></div>
      <div style="background: yellow; width: 100%; height: 20%"></div>
      <div style="background: orange; width: 100%; height: 20%"></div>
      <div style="background: blanchedalmond; width: 100%; height: 20%"></div>
      
      <span class="div2"></span>
      
    </div>
  </body>
</html>
<style>
  body {
    margin: 0;
  }
  .div1 {
    width: 100vw;
    height: 5000px;
    background: red;
    z-index: 100;
    overflow-y: scroll;
  }
  .div2 {
    position: fixed;
    top: 0;
    width: 100%;
    height: 300px;
    background: green;
    z-index: 32;
  }
</style>

在这里插入图片描述

position:fixed的div2始终处于最上方

5.sticky（英文释义：黏(性)的; 一面带黏胶的;）

可以说是小型的fixed，可以相对于某个元素某个元素某个元素进行fixed定位。当不触发sticky的时候，处于正常文档流之中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="div1">
      <div style="background: orange; width: 100%; height: 100px"></div>
      <div style="background: yellow; width: 100%; height: 100px"></div>
      <div style="background: orange; width: 100%; height: 100px"></div>
      <div style="background: yellow; width: 100%; height: 100px"></div>
      <div style="background: orange; width: 100%; height: 100px"></div>
      <div class="div2"></div>
      <div class="div3"></div>
    </div>
  </body>
</html>
<style>
  body {
    margin: 0;
  }
  .div1 {
    position: relative;
    width: 80vw;
    height: 80vh;
    top: 30px;
    left: 30px;
    background: red;
    z-index: 100;
    overflow: auto;
  }
  .div2 {
    position: absolute;
    width: 50%;
    height: 5000px;
    top: 30px;
    left: 30px;
    background: green;
    z-index: 32;
  }
  .div3 {
    position: sticky;
    width: 50%;
    height: 100px;
    top: 100px;
    left: 100px;
    background: blue;
    z-index: 32;
  }
</style>

在这里插入图片描述
不好意思应该设置一个top:0，相对于div1置顶更加直观，嫌麻烦就不再录制了。

6.inherit（英文释义：接替; 继任;）

inherit不再详细说明，从父元素继承 position 属性的值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="div1">
      <div class="div2"></div>
    </div>
  </body>
</html>
<style>
  body {
    margin: 0;
  }
  .div1 {
    position: relative;
    width: 80vw;
    height: 80vh;
    top: 30px;
    left: 30px;
    background: red;
    overflow: auto;
  }
  .div2 {
    position: inherit;
    width: 50%;
    height: 100px;
    top: 30px;
    left: 30px;
    background: green;
  }
</style>

在这里插入图片描述

如上可见，绿色的div2设置为inherit，继承了父元素div1的relative元素，top，left属性生效

自己动手写点demo有助于加深理解，如果还没有理解或者有不详尽的地方，可以多看几篇文章。阮一峰CSS 定位详解

阿鼎0815

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS定位详解

position 属性氛围 static，relative，absolute，fixed，sticky 5种本文涉及文档流基础概念。文档流（百度百科）：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)1.static（英文释义：静止的; 静态的; 停滞的; ）不设置position属性的元素，默认position:static，static属性下设置top,
复制链接

扫一扫