CSS的三种定位

最新推荐文章于 2022-08-15 20:11:04 发布

F-process

最新推荐文章于 2022-08-15 20:11:04 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏： html css 文章标签： css html

本文链接：https://blog.youkuaiyun.com/qq_15421661/article/details/76575345

html 同时被 2 个专栏收录

21 篇文章

订阅专栏

css

13 篇文章

订阅专栏

本文介绍了CSS中的三种定位方式：相对定位、绝对定位和固定定位。相对定位保持元素在普通流中的位置，但可以相对自身移动；绝对定位根据最近已定位祖先元素或初始包含块进行定位，脱离普通流，可覆盖其他元素；固定定位则是相对于浏览器窗口定位，同样脱离普通流，常用于创建固定头部或侧边栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的三种定位

CSS的三种引用方式：相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。

相对定位（relative）

　被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p1{
            background-color: red;
        }
        .p2{
            position: relative;
            left: 20px;
        }
        .p3{
            position: relative;
            right: 20px;
        }
    </style>
</head> 
<body>
    <div class="p1">我是相对定位</div>
    <div class="p2">我是相对定位</div>
    <div class="p3">我是相对定位</div>
</body>
</html>

绝对定位

对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。
　　绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #p1 {
            width: 200px;
            height: 200px;
            background: yellow;
        }
        #p2 {
            width: 50%;
            height: 50%;
            background: red;
            top: 100px;
            left: 100px;
            position: absolute;
        }
    </style>
</head> 
<body>
    <div id="p1">
        <div id="p2"></div>
    </div>
</body>
</html>

固定定位

相对于浏览器窗口，其余的特点类似于绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #p1 {
            top: 100px;
            left: 100px;
            position: fixed;
            width: 200px;
            height: 200px;
            background: yellow;
        }
    </style>
</head> 
<body>
    <div id="p1"></div>
</body>
</html>