CSS 定位

最新推荐文章于 2021-12-05 10:02:36 发布

whuhewei

最新推荐文章于 2021-12-05 10:02:36 发布

阅读量221

点赞数 2

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/whuhewei/article/details/104671235

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

position（定位）属性指定了元素的定位类型。元素可以使用顶部，底部，左侧和右侧属性进行定位。然而，除非是先设定position属性，否则这些属性（top/bottom/left/right）无法工作。不同的定位方法有不同的工作方式，下面对各种定位方法进行介绍：

static定位

HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到top,bottom,left,right的影响。
请看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS定位</title>
    <style>
        .div1{
            height: 200px;
            background-color: coral;
        }
        .div2{
            height: 200px;
            background-color: blueviolet;
            position: static;
            top: 50px;
            left: 50px;
        }
        .div3{
            height: 500px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">第一个盒子</div>
    <div class="div2">第二个盒子</div>
    <div class="div3">第三个盒子</div>
</body>
</html>

运行结果如下：
在这里插入图片描述
可以看到当第二个盒子的position设置为static时，top与left属性均不起作用，即没有定位。

fixed定位

当使用固定定位时，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
当把以上代码中div2的position属性修改为fixed时，效果如下图所示：
在这里插入图片描述
当鼠标滚轮向下滚动时，第二个盒子在浏览器中的位置固定不变。

relative定位

相对定位元素的定位是相对其正常位置，而且移动相对定位元素，它原本所占的空间不会改变，即设置了relative的元素仍然处于文档流中，元素的宽高不变。如果最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
当把以上代码中div2的position属性修改为relative时，效果如下图所示：
在这里插入图片描述
可以看到对设置了相对定位的元素设置偏移量不会影响其它元素的位置。相对定位元素经常被用来作为绝对定位元素的容器块。

absolute定位

绝对定位的元素的位置相对于最近的已定位（设置了绝对或相对定位）父元素，如果元素没有已定位的父元素，那么它的位置相对于html标签。
当把以上代码中div2的position属性修改为absolute时，效果如下图所示：
在这里插入图片描述
这样看上去跟固定定位没有什么不同，但是它们有两点不同：

第二个盒子的位置会随着鼠标滚轮的滚动改变。
由于div2没有已定位的父元素，所以它的位置是相对于html标签的，如果它存在已定位的父元素，将会与固定定位有很大不同。

可以看到，absolute定位使元素的位置与文档流无关，因此不占据空间。换句话说，设置了absolute的元素脱离了文档流，脱离后原来的位置相当于是空的，下面的元素（在这个例子中是第三个盒子）会来占据位置。元素在没有设置宽度的情况下，宽度由元素里面的内容决定（被“第一个盒子”文字内容撑开）。

sticky定位

sticky英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。该定位方式是基于用户的滚动位置来定位。这种定位方式比较特殊，在Chrome浏览器中测试发现，当页面能够完全包含设置sticky定位的元素时，它与静态定位表现一致，即无视对该元素设置的偏移量；而当页面滚动超出目标区域时，它表现为固定定位的特征，会固定在目标位置。
将div2设置为粘性定位后，当页面滚动超出目标区域（设置了sticky定位的元素）时显示如下：
在这里插入图片描述
可以看到第二个盒子在页面之外时距离浏览器顶部50px，而对其设置的left属性却没有起作用。

whuhewei

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 定位

position（定位）属性指定了元素的定位类型。元素可以使用顶部，底部，左侧和右侧属性进行定位。然而，除非是先设定position属性，否则这些属性（top/bottom/left/right）无法工作。不同的定位方法有不同的工作方式，下面对各种定位方法进行介绍：static定位HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到top,bottom,left,ri...
复制链接

扫一扫

专栏目录