CSS学习--position

最新推荐文章于 2024-03-04 10:42:21 发布

原创最新推荐文章于 2024-03-04 10:42:21 发布 · 148 阅读

CC 4.0 BY-SA版权

本文深入解析了CSS中的六种定位方式：absolute、fixed、relative、static、sticky和inherit，详细阐述了每种定位方式的特点和使用场景，特别是absolute和fixed定位的细节说明，以及sticky定位的混合特性。

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

position是一种定位方式。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，详情查看 CSS initial 关键字。

fixed

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

一个固定定位元素不会保留它原本在页面应有的空隙（即会脱离文档流）。

令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案

absolute

当元素的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：
（1）当元素的父元素也设置了position属性，且position的属性值为absolute或者relative时，此时元素以父yuansu为定位对象来进行定位。
注意，对象虽然确定好了，但有些细节需要注意，那就是我们到底以父元素的哪个定位点来进行定位呢？如果父元素设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。
（2）如果元素不存在一个有着position属性的父元素，那么那就会以body为定位对象，按照浏览器的窗口进行定位。

relative

relative是指与它本身的位置的相对关系。
看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css-learning</title>
        <style type="text/css">
            .obj1 {
                position: relative;
                top: 10px;
                bottom: 20px;
                background-color:#ccc;
            }
            .obj2 {
                background-color:#0ea;
            }
        </style>
    </head>
    <body>
        <div class="obj1">hello1</div>
        <div class="obj2">hello2</div>
    </body>
</html>

在这里插入图片描述
删去定位代码，即：

.obj1 {
   position: relative;
   top: 10px;
   bottom: 20px;
   background-color:#ccc;
}

在这里插入图片描述
从结果可以看到“hello1”相对它本应在的位置进行了移动，而“hello2”不会因为“hello1”的位置变化而变化。

sticky

它是相对定位（position:relative）和固定定位（position:fixed）的混合。
使用它，我们不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。

sticky具体可以参考

学习资料：
https://baijiahao.baidu.com/s?id=1606501525792786812&wfr=spider&for=pc
https://blog.youkuaiyun.com/xizi_ghq/article/details/81986874