css定位

〆启

已于 2022-07-05 10:31:05 修改

阅读量172

点赞数 1

于 2022-07-01 00:54:12 首次发布

本文链接：https://blog.csdn.net/m0_70516782/article/details/125550853

版权

css HTML 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

相对定位

布局

文档流 margin 浮动定位

定位：

更加高级的布局手段

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

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

通过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：元素向上偏移量

可设正值，也可设负值

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

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

 .box1 {
        width: 50px;
        height: 50px;
        background-color: yellow;
        position: relative;
        bottom: 50px;
      }

绝对定位

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

绝对定位：

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

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

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

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

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

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

包含块：containing block

正常情况下：

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

-定位情况下：

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

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

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

 .box1 {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 开启元素的绝对定位 */
        position: absolute;
        top: 0px;
        left: 0px;
      }

固定定位

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

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

粘滞定位

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

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

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

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

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

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

参考京东网页侧边导航

绝对定位元素布局

水平布局

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 top bottom都为0，margin会均分四个方向值

从而使元素达到水平垂直居中 ****

两个auto的情况

margin 和width为auto，调整width

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

width 和left，right其中一个值，调整left或right

left，right都为auto 调整right

三个auto的情况

margin width left ===> 调整left

margin width right ===> 调整right

width left right ===> 调整right

四个值auto的情况

width，right，left margin 调整right

总结：right>left>width>margin ****

垂直布局

等式也必须满足

总结： bottom>top>height>margin ****

层级以及透明效果

<!-- 1:如果定位元素的层级是一样，则下边的元素会盖住上边的

通过z-index属性可以用来设置元素的层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级

层级越高，越优先显示

对于没有开启定位的元素不能使用z-index

-->

<!--

2、设置元素的透明背景

opacity [əu'pæsiti] 可以用来设置元素背景的透明，

它需要一个0-1之间的值

0 表示完全透明

1 表示完全不透明

0.5 表示半透明

opacity与rgba设置透明度，两者的区别

1、opacity属性，rgba样式值

2、rgba样式值一般必须跟在特定的属性后，例如背景色，颜色

opacity 可以任意设置

3、继承性

opacity属性，有样式的继承

rgba样式值各设各的

〆启

关注

1
点赞
踩
0

收藏

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

文档流 margin 浮动定位更加高级的布局手段定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素可选值： static： ['stætik] 默认值，元素没有开启定位 relative： ['relətiv] 开启元素的相对定位 absolute： ['æbsəlju:t] 开启元素的绝对定位 fixed：开启元素的固定定位（也是绝对定位的一种）
复制链接

扫一扫

专栏目录