文档定位（position）的使用

最新推荐文章于 2024-06-28 22:16:43 发布

Andy·Wu

最新推荐文章于 2024-06-28 22:16:43 发布

阅读量579

点赞数

分类专栏： CSS和HTML 文章标签： CSS HTML 定位

本文链接：https://blog.csdn.net/u010011236/article/details/87909573

版权

本文介绍了CSS中position属性的基本概念和用法，包括static、relative、absolute、fixed及sticky等定位方式。通过实例解析了各种定位方式的效果，帮助理解元素在文档中的位置调整。

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

一、基本概念

position：用于指定一个元素在文档中的定位方式。并且由top, right, bottom, left 属性决定该元素的最终位置。
根据其取值不同可以有不同的定位方式：

static：默认值，没有定位效果，按照正常的情况出现在文档中。
relative：相对于元素正常显示的位置进行偏移。
absolute：绝对定位有两种情况：
1. 当祖先元素 position:relative 时，后代元素相对于祖先元素进行位置偏移；
2. 当祖先元素没有设置 position 时，后代元素相对于整html文档进行位置偏移。
fixed：相对于浏览器窗口进行定位。
sticky：粘性定位可以被认为是相对定位(relative)和固定定位(fixed)的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

二、例子

（1）relative

相对定位是以该元素在文档中正常出现的位置为参考位置进行偏移。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素定位测试</title>
    <style>
        .box1 {
    
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
            color: white;
        }
        .box {
    
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
            color: white;
        }
        #tw