CSS定位

最新推荐文章于 2024-09-18 18:24:31 发布

lskaixin

最新推荐文章于 2024-09-18 18:24:31 发布

阅读量288

点赞数 1

本文链接：https://blog.csdn.net/ls08250907/article/details/119417125

版权

本文详细介绍了CSS中的定位概念，包括静态定位、相对定位、绝对定位、固定定位和粘性定位。静态定位遵循正常文档流，相对定位通过设置top、right等属性偏离其原始位置但不改变其他内容。绝对定位相对于最近的定位祖先或body进行定位，固定定位始终相对于视口定位，粘性定位则在用户滚动时在相对和固定定位间切换。

摘要由CSDN通过智能技术生成

前言

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。

一、静态定位（static）

1.1 HTML 元素默认情况下的定位方式为 static（静态）。

1.2 静态定位的元素不受 top、bottom、left 和 right 属性的影响。

1.3 position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

二、相对定位(relative)

2.1 position: relative; 的元素相对于其正常位置进行定位。

2.2 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。

2.3 不会对其余内容进行调整来适应元素留下的任何空间。（占有原来的位置）

2.4 定位参数：left、right、top、bottom、z-index。

z-index属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面），只有定位的盒子才有z-index属性。

  .box1 {
            position: relative;
            top: 0;
            left: 250px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>