css样式—定位

徽州不知名博客

已于 2022-06-30 18:03:58 修改

阅读量302

点赞数 3

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

于 2022-06-30 18:00:29 首次发布

本文链接：https://blog.csdn.net/m0_57243953/article/details/125545064

版权

HTML 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

7 篇文章 1 订阅

订阅专栏

什么是定位?

他是更加高级的布局手段

定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。

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

可选值：

static 默认值，元素没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位（也是绝对定位的一种）
sticky 开启元素的粘滞定位

1、相对定位

相对定位

当元素的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;
        /* 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>

2、绝对定位

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

绝对定位后：

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

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

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

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

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

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

初始位置：

        正常情况下：

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

        定位情况下：

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

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

        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>
      </div>
    </div>
  </body>

3、固定定位

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

固定地位的性质：

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

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

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

固定定位的应用场景：

        固定导航
固定侧边栏
广告
<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>

4、粘滞定位

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

        当元素的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>
      px：是Pixel的缩写。像素是指基本原色素及其灰度的基本编码，
由 Picture（图像）和 Element（元素）这两个单词的字母所组成的。
    </div>
  </body>

5、层级以及透明效果的

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

        通过z-index属性可以用来设置元素的层级
        可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
        层级越高，越优先显示
        对于没有开启定位的元素不能使用z-index

2、设置元素的透明背景

        opacity 可以用来设置元素背景的透明，

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

        0 表示完全透明
        1 表示完全不透明
        0.5 表示半透明

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

        1、opacity属性，rgba样式值

        2、rgba样式值一般必须跟在特定的属性后，例如背景色，颜色opacity 可以任意设置。

        3、继承性

                 opacity属性，有样式的继承

                rgba样式值，各设各的
<style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        z-index: 2;
      }

      /* 2:父元素的层级再高，也不会盖住子元素*/
      .box2 {
        width: 100px;
        height: 100px;
        background-color: rgba(135, 206, 235, 0.5);
        /* opacity: .8; */
        position: relative;
        left: 30px;
        bottom: 30px;
        z-index: 3;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>

    <p style="background-color: rgba(255, 0, 0,.5);">
      不尝救而要同德修胜没五
      <span style="background-color: green;">应世遗其葬此，主。</span>
    </p>

    <p style="background-color: red; opacity: .5;">
      不尝救而要同德修胜没五
      <span style="background-color: green;">应世遗其葬此，主。</span>
    </p>

  </body>

徽州不知名博客

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
css样式—定位

定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。
复制链接

扫一扫

专栏目录

static	默认值，元素没有开启定位
relative	开启元素的相对定位
absolute	开启元素的绝对定位
fixed	开启元素的固定定位（也是绝对定位的一种）
sticky	开启元素的粘滞定位

left	元素向右偏移量
right	元素向左偏移量
top	元素向下偏移量
bottom	元素向上偏移量

css样式—定位

什么是定位?

1、相对定位

相对定位

偏移量

2、绝对定位

3、固定定位

4、粘滞定位

5、层级以及透明效果的

“相关推荐”对你有帮助么？