position定位详解

最新推荐文章于 2022-10-18 12:06:37 发布

原创最新推荐文章于 2022-10-18 12:06:37 发布 · 742 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

8 篇文章

订阅专栏

css中有三种定位：static、fixed、relative、absolute

static是正常定位
fixed 为固定定位相对于浏览器窗口进行定位
relative为相对定位，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留
absolute为绝对定位，相对于static定位以外的第一个有定位的祖先元素进行定位

<div class="header">haha</div>
<!-- fixed 相对于浏览器窗口进行定位 -->
<div class="fixed">
    fixed
</div>
<!-- relative 相对定位 相对于元素本身的位置进行定位，它原本所占的空间仍然会保留 -->
<div class="relative">
    relative
</div>
<!-- absolute 绝对定位，相对于static定位以外的第一个有定位的祖先元素进行定位 -->
<div class="absolute-box">
    <div class="absolute">
        absolute
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 500px;
    background-color: #03A9F4;
    color: #fff;
}

.fixed {
    position: fixed;
    top: 0;
    right: 0;
}

.relative {
    position: relative;
    top: 0;
    right: 0;
}

.absolute-box {
    position: relative;

}

.absolute-box .absolute {
    position: absolute;
    top: 0;
    right: 0;
}