postion absolution relative fixed static 使用

最新推荐文章于 2024-07-07 17:22:42 发布

hassen2010

最新推荐文章于 2024-07-07 17:22:42 发布

阅读量779

点赞数

文章标签： html postion

本文详细解析了CSS中不同类型的定位方式，包括static、relative、absolute、fixed的特点与应用场景，并通过实例展示了如何利用这些定位属性实现元素的精确布局。

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

遵循正常文档(占空间)

static 默认值，trbl无效
relative. trbl有效，相对自己正常的位置的偏移，比如 top:10px 移动后顶部的位置与移动前顶部的位置差10px。也就是向下移动10px

脱离正常文档（不占空间）

absolute trbl 有效, 相对于 static 定位以外的第一个父元素进行定位（意思是，找父节点，找到第一个非static定位的，如果一直向上找不到，那么就是body）. 如果没有设定 t r b l 的话.那么就相对于父元素.
fixed trbl 有效. 但是是针对浏览器窗口的. 随着浏览器的变化而变化. 但是不随滚动条的变化而变化. 最常用的是固定页面的head部分. 就像excel中的冻结首行首列.

常用 relative 在外层内层用 absolute 来配合使用.就不用使用浮动来解决问题了.（可以出现删除的小红点，可以在原始图片上增加按钮等）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .static {
                background-color: red;
                left: 90px;//无效
            }
            .relative {
                background-color: orange;
                top: 100px;
                left: 90px;
                position: relative;
            }
            .absolute {
                background-color: green;
                top: 100px;
                position: absolute;
            }
            .absolute2 {
                background-color: green;
                top: 300px;
                position: absolute;
            }
            .fixed {
                background-color: blue;
                top: 50px;
                right: 50px;
                left: 50px;
                position: fixed;
            }
        </style>
    </head>
    <body>
        <div class="static">div postion default static</div>
        <div class="relative">div postion relative</div>
        <div class="absolute">div postion absolute</div>
        <div class="fixed">div postion fixed</div>
        <div class="absolute2">
            out absolute
            <div class="relative">inner relative</div>
        </div>

        <div class="relative">
            out relative
            <div class="absolute">inner absolute</div>
        </div>

    </body>
</html>