CSS——定位、层级与透明效果

最新推荐文章于 2024-08-06 21:40:45 发布

猎户李铁柱

最新推荐文章于 2024-08-06 21:40:45 发布

阅读量1.2k

点赞数 2

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

本文链接：https://blog.csdn.net/asdfg2047/article/details/125546208

版权

1、相对定位

定位：

更加高级的布局手段

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

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

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

可设正值，也可设负值

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

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

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

最低0.47元/天解锁文章

猎户李铁柱

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——定位、层级与透明效果

目录1、相对定位2、绝对定位3、固定定位4、粘滞定位5、绝对定位元素布局6、层级以及透明效果定位：更加高级的布局手段 - 定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值： static： ['stætik] 默认值，元素没有开启定位 relative： ['relətiv] 开启元素的相对定位 absolute：
复制链接

扫一扫