CSS：简单讲解position属性

最新推荐文章于 2023-12-25 17:00:00 发布

violet_Y_y

最新推荐文章于 2023-12-25 17:00:00 发布

阅读量766

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/laurel_y/article/details/71482308

版权

HTML+CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

我在模仿页面的过程中遇到了将position属性与:before / :after 选择器联合使用的情况，觉得应该记录下来，因此写一篇文章简单捋一下position属性的三个值及其应用场景，最后分享一下仿页面时借鉴于他人的巧妙用法。

一、文档流布局的概念

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。内联元素也不会独占一行。几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素。有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。但是在IE6中浮动元素也存在于文档流中。

上面引用的文字中，绝对定位是指 position:absolute ，固定定位是指 position:fixed 。

二、position的属性值及其定义

以上就是关于position几个属性值的基本概念，接下来会根据这个概念详细说明一下：

2.1、position:relative 相对定位

相对定位的关键定义在于：其相对于自身在正常文档流中的原始位置定位，特点是不会脱离文档流并且原始位置不会被其他元素重新占据（除非发生层叠覆盖）。
举例说明：

源码就是为test3设置css属性：

     position:relative; top:20px; left:-20px;

从这张图片的效果加上就可以看到，使用相对定位不会对它周围的元素造成影响，这一特性对于它的应用场景非常重要。

2.2、position:fixed 固定定位

固定定位，顾名思义，它是（相对于浏览器的窗口）定位之后固定不动的，特点是固定定位会脱离文档流。
举例说明：

源码就是为test3设置css属性：

      position:fixed; top:20px; right:20px;

从这张图片的效果加上可以得出两个结论：

（1）test3元素的确是相对于浏览器窗口定位的；

（2）test3元素脱离了文档流，因此test4元素才会忽略test3紧贴着test2元素；

不仅如此，当滑动滚动条，使得文档内容超出可视范围，会发现test3依然固定在相对于窗口顶部20px的位置；

2.3、position:absolute 绝对定位

定义中说：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。需要注意的是：position:static 是所有html元素默认参数。因此这个的定义应该理解为：有html元素 E ，当它的position属性值为absolute时，在当前DOM树中从E开始向上查找，第一个、设置position属性值不为static的、祖先元素 F 即为 E 的相对定位元素，也就是说 E 相对于F进行定位。如果它的祖先元素没有设置position属性值，默认为static，那么 E 就相对于 body 元素定位，即相对于文档进行定位。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {font-size: 15px;color: #fff;}
        .test1 {width: 500px;height: 500px;background: #123;}
        .test2 {width: 400px;height: 400px;background: #234;position: absolute;right: 20px;top: 20px;}
         /* 或者修改test2 属性值 position: relative/fixed */
        .test3 {width: 300px;height: 300px;background: #345;position: absolute;right: 20px;top: 20px;}
    </style>
</head>
<body>
    <div class="test1">
        test1
        <div class="test2">
            test2
            <div class="test3">test3</div>
        </div>
    </div>
</body>
</html>

那么我们就会看到 test3 元素相对于 test2 定位， test2 元素相对于 body 定位，效果如下：

以上基本就是position三个主要属性值的简单讲解和示例了，需要注意：absolute 和 fixed 将使得元素脱离文档流而存在，而 relative 不会，并且元素使用relative定位时对相邻的元素无影响。这使得在开发工作中，当我们需要元素E相对父级容器进行定位时倾向为父级容器设置属性 position:relative；

三、各属性常见的应用场景

3.1、position:fixed 的使用场景

由于固定定位使得元素相对于浏览器窗口定位，并且不受滚动条滑动的影响，因此固定定位适合用于像页面导航、“一键回到顶部”、广告弹窗、遮罩层等功能，图片说明如下：

（1）顶部导航栏出于引导用户点击操作、方便随时查看的目的，会让它fixed在浏览器窗口的顶部，也有一些会放在侧边栏。

简单示例：使用 position:fixed 固定定位，同时设置z-index值，确保该模块始终在视图上层不被覆盖。

#top {
  box-sizing: border-box;
  background:rgba(2,116,179,1);
  border-bottom:3px solid #333;
  position:fixed;
  width:100%;
  z-index:100000;
  color: #fff;
}

（2）“ 回到顶部 ”按钮

按F12进入调试模式，查看这几个元素的源码和样式可知，其主要原理就是： position:fixed 。

3.2、position:relative 和 position:absolute 结合使用

在上面讲解理论中我们说过“absolute 和 fixed 将使得元素脱离文档流而存在，而 relative 不会，并且元素使用relative定位时对相邻的元素无影响。这使得在开发工作中，当我们需要元素E相对父级容器进行定位时倾向为父级容器设置属性 position:relative”，因此我们常应用绝对定位和相对定位的时候一般是为父级容器设置属性 position:relative ，不设置TRBL值（top、right、bottom、left），同时为子元素设置 position:absolute ，然后利用top、right、bottom、left这四个属性，在父级容器中为子元素进行定位布局。具体场景如：弹出框的位于屏幕中间显示、下拉框菜单效果等等。

（1）下拉菜单的定位：csdn博客点击“分类”查看详细列表，不仅如此，下拉框左上方的尖角箭头也是相对于下拉框绝对定位的。

（2）弹出框及其遮罩层，其实用fixed才是更优的，但是如果确保页面的height不会超出窗口，absolute也就够用了。

四、借鉴于他人的巧妙用法

本来还想分享一下我在仿页面的过程中看到的“巧用”position属性与:before / :after 选择器，但是这篇文一不小心写的太长，于是决定先简单的放源码链接上来，有机会再开一篇文专门讲解这一块。传送门：http://codepen.io/laurelfreecodecamp/pen/YVZGaY

两个应用场景都是将position属性与:before / :after 选择器结合使用了。

（1）注意 :before 的背景色设置及 :after 的背景图设置；

（2）:after设置content属性值及 :hover:after 的鼠标悬浮时的渲染效果；