css中的几种定位

山楂树下的吉他男孩

已于 2022-07-24 22:37:20 修改

阅读量88

点赞数 3

文章标签：大数据 html5 前端

于 2022-06-30 20:38:32 首次发布

本文链接：https://blog.csdn.net/m0_63544378/article/details/125547136

版权

在我们学习过程中，特别是在写代码的时候，我们想要调整页面效果的时候，就会打乱页面的布局，今天就带大家了解css里面的定位。

1.定位

更加高级的布局手段

- 定位指的就是将指定的元素摆放到页面的任意位置

通过定位可以任意的摆放元素

- 通过position属性来设置元素的定位

-可选值：

static： ['stætik] 默认值，元素没有开启定位

relative： ['relətiv] 开启元素的相对定位

absolute： ['æbsəlju:t] 开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）

sticky： ['stiki] 开启元素的粘滞定位

2. 相对定位

相对定位：

当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型

1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）

3.相对定位的元素不会脱离文档流

4.相对定位会使元素提升一个层级

5.相对定位不会改变元素的性质，块还是块，内联还是内联

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    <style type="text/css">
      .box {
        width: 600px;
        height: 600px;
        border: 5px solid rgb(56, 56, 56);
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        /* float: left; */
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: relative;
        left: 100px;
        /* right: 100px; */
        /* bottom: 200px; */
        top:100px
       
      }

      .box3 {
        width: 200px;
        height: 200px;
        background-color: green;
      }

      .s1 {
        /* width: 200px;
        height: 200px; */
        background-color: yellow;
        position: relative;
        bottom: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <span class="s1">我是一个span</span>
    </div>
  </body>
</html>

3.绝对定位

绝对定位：

1.开启绝对定位，会使元素脱离文档流

2.绝对定位会改变元素的性质，不在区分块还是行内，更类似行内块元素

3.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

4.绝对定位会使元素提升一个层级

5.绝对定位是相对于离他最近的包含块定位的

（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

包含块：containing block

-正常情况下：

离当前元素最近的祖先块元素

-定位情况下：

离他最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

html （根元素，初始包含块）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 开启元素的绝对定位 */
        position: absolute;
        top: 0px;
        left: 0px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .box3{
        width: 400px;
        height: 400px;
        background-color: pink;
        position: relative;
        overflow: hidden;
      }
      .box4{
        width: 300px;
        height: 400px;
        background-color: blue;
        position: absolute;
        margin-top: 100px;
        margin-left: 50px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box3">
        <div class="box4">
          <div class="box1"></div>
          <!-- <div class="box2"></div> -->
        </div>
      </div>
    </div>
  </body>
</html>

4.固定定位

（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；

（2）以浏览器为参照物，和父元素没有任何关系；

（3）固定定位不占有原来的位置，即脱离标准流 ,改变元素的性质

(4) 应用场景

- 固定导航

- 固定侧边栏

- 广告

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <style type="text/css">
      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        position: fixed;
        left: 0px;
        top: 0px;
      }
      .box2{
        width: 400px;
        height: 400px;
        background-color: burlywood;
        position: relative;
      }
    </style>
  </head>
  <body style="height: 5000px">
    <div class="outer">
      <div class="box2">
        <div class="box1"></div>
        <span>否苦于毒至帝龄亲国。</span>
      </div>
    </div>
  </body>
</html>

5.粘滞定位

粘滞定位（一般用于页面导航的吸顶效果)

-当元素的position属性设置为sticky时，则开启了元素的粘滞定位

（1）以浏览器为参照物（体现固定定位特点）；

（2）占有原来位置,不会脱离文档流（体现相对定位特点）；

（3）粘滞定位可以在元素到达某个位置时，将其固定

(4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>导航条</title>
  <style>
    ul {
      width: 800px;
      height: 50px;
      background-color: #ccc;
      margin: 50px auto;
      /* 开启粘滞定位 */
      position: sticky;
      top: 0px;
    }

    li {
      float: left;
      width: 25%;
      line-height: 50px;
    }
  </style>
</head>

<body style="height: 3000px;">
  <!-- 创建导航条的结构 -->
  <ul>
    <li>导航</li>
    <li>导航</li>
    <li>导航</li>
    <li>导航</li>
  </ul>
  <div>
    我是一个盒子
  </div>
</body>

</html>