CSS 定位

四分十七

已于 2022-07-09 16:47:05 修改

阅读量432

点赞数 1

分类专栏：前端学习html css 文章标签： html 前端 css

于 2022-06-30 13:06:38 首次发布

本文链接：https://blog.csdn.net/qq_52153640/article/details/125538448

版权

前端学习html 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

一相对定位

定位：

更加高级的布局手段

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

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

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

-可选值：

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

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

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

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

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

相对定位：

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

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

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

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

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

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

偏移量

当开启了元素的定位（position属性值是一个非static的值）时，

可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动

left：元素向右偏移量，

right：元素向左偏移量

top：元素向下偏移量

bottom：元素向上偏移量

可设正值，也可设负值

通常偏移量只需要使用两个就可以对一个元素进行定位，

一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

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

      .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>

二绝对定位

当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

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

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

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

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

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

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

包含块：containing block

-正常情况下：

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

-定位情况下：

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

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

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

 <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>

三固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位

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

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

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

(4)应用场景

- 固定导航

- 固定侧边栏

- 广告

 <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>

四粘滞定位

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

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

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

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

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

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

 <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>

五绝对定位元素布局

水平布局

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right

-当开启决定定位后，水平方向的布局等式就会加上left，right两个值

此时规则和之前一样，只是多添加了两个值

-当发生过度约束时

1:如果9个值中没有auto，则自动调整right值以使等式满足

2:如果有auto，则自动调整auto的值以使等式满足

-可设置auto的值

margin width left right

四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,

若width left right都为0，margin会均分四个方向值

—两个auto的情况

margin 和width为auto，调整width

margin 和left，right其中一个值为auto，调整left或right

width 和left，right其中一个值，不可同时设为auto

left，right都为auto 调整right

—三个auto的情况

margin width left ===> width，left不可同时设为auto

margin width right ===> width，right不可同时设为auto

width left right ===> width，right，left不可同时设为auto

—四个值auto的情况

width，right，left不可同时设为auto

垂直布局

等式也必须满足

   <style>
      .box1 {
        width: 400px;
        height: 400px;
        background-color: palegreen;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
        top: 0;
        left: 0;
        right:0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>

四分十七

关注

1
点赞
踩
1

收藏

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

目录一相对定位二绝对定位三固定定位四粘滞定位五绝对定位元素布局定位：更加高级的布局手段 - 定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值： static： ['stætik] 默认值，元素没有开启定位 relative： ['relətiv] 开启元素的相对定位 absolute： ['æbsəlju:t]
复制链接

扫一扫