css —— 文档流，position详解

最新推荐文章于 2024-04-01 00:03:32 发布

huzhenv5

最新推荐文章于 2024-04-01 00:03:32 发布

阅读量1k

点赞数 2

分类专栏： HTML CSS 文章标签： css 文档流 position

本文链接：https://blog.csdn.net/huzhenv5/article/details/104938183

版权

CSS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 1 订阅

订阅专栏

文章目录

文档流
position详解

文档流

在讲position属性之前，我们先要了解文档流的基本概念，有助于我们深入理解position的每个值的特点。

我们来看看什么是文档流(normal flow)，下面是 www.w3.org 的描述：

Normal flow
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
翻译：
正常流中的框属于格式化上下文，它可以是块或内联的，但不能同时是块和内联的。块级别的框参与块格式化上下文。内联级别的框参与内联格式上下文。

简单的说就是：

normal flow直译为常规流、正常流，国内大多翻译为文档流
窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素
每个非浮动块级元素都独占一行；非浮动的内联元素则从左到右连续排列，直到改行容纳不下再另起一行
浮动元素则按规定浮在行的一端，若当前行容不下，则另起新行再浮动
几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素
有三种情况将使得元素脱离normal flow而存在，分别是 float，absolute ，fixed，但是在IE6中浮动元素也存在于normal flow中。

position详解

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。默认取值 static，它所有可取的值见下表：

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

在开始对每个属性值进行讲解前，先来个思维导图：
在这里插入图片描述

position 之 static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
在这里插入图片描述

注意：

默认从父级元素的左上角开始布局，如果父级元素有padding属性，则所在位置会按照padding值进行调整
它的margin属性是相对于postion为static的位置起作用的（如果附近有relative的元素，则margin是相对于该元素的默认位置计算外边距）

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
	    body {
	         margin: 0;
	   	}
        .block {
            position: relative;
            top:10px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 2px solid blue;
            box-sizing: border-box;
        }
        /* 忽略 top 属性 */
        .block:nth-child(2){
            position: static;
            border-color:red;
        }
    </style>
</head>
<body>
    <div class="block">
        A
    </div>
    <div class="block">
        B
    </div>
    <div class="block">
        C
    </div>
    <div class="block">
        D
    </div>
</body>
</html>

运行：
在这里插入图片描述
从运行结果可以看出，A、C、D元素都相对默认位置，向下偏移了10px，而B因为是static 的缘故，忽略了top的值，保持默认在文档流中的位置

position 之 relative

生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
在这里插入图片描述

注意：

他是默认参照默认static的位置配合TRBL（top，right，bottom，left）进行相对定位
可以理解成虽然相对原来的位置发生了偏移，但是原来的位置的坑还占着在，margin的计算还是参照原来的坑位计算

实例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style>
        body {
            margin: 0;
        }
        .border {
            width: 200px;
            height: 224px;
            padding: 10px;
            border: 2px solid blue;
            box-sizing: border-box;
        }
        .block {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 20px;
            left: 20px
        }
        .static {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="border">
        <div class="block"></div>
        <div class="static"></div>
    </div>
</body>
</html>

运行：
在这里插入图片描述

position 之 absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行调整。可通过z-index进行层次分级。
在这里插入图片描述

注意：

相对于 static 定位以外的第一个父元素进行定位
absolute会造成撑开的父元素发生坍塌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style>
        body {
            margin: 0;
        }
        .block {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
        .border {
            width: 300px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="border">
        <div class="block"></div>
    </div>
    
</body>
</html>

在这里插入图片描述

注意：

如果position为absolute的元素的lrtb都没有设置（即为auto），则该元素的将仍然会按照正常文档流布局，但是其原来在文档中的坑并不会被占着，所以父元素仍会有高度坍塌的现象
Top的值表示对象上边框与浏览器窗口顶部的距离，bottom的值表示对象下边框与浏览器窗口底部的距离，两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变
left的值表示对象左边框与浏览器窗口左边的距离，right的值表示对象右边框与浏览器窗口右边的距离，两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变
1和relative之间的margin回取最大值不同，absolute元素的margin不会和其它的margin合并

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style>
        body {
            margin: 0;
        }
        .border-re {
            width: 40px;
            height: 40px;
            border: 2px solid blue;
            margin: 10px;
        }
        .border {
            width: 40px;
            height: 40px;
            border: 2px solid blue;
            margin: 10px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="border-re"></div>
    <div class="border"></div>
    
</body>
</html>

运行：
在这里插入图片描述

position 之 fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
在这里插入图片描述

注意：

fixed和relative的特点差不多，唯一的区别就是ltrb的对象不同，一个是非static的父元素，一个是浏览器的窗口

position 之 sticky

position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是lrtb等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的lrtb等属性成固定位置的效果。
在这里插入图片描述这里有一段mdn上的描述：

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table元素的效果与 position: relative 相同。

由于sticky并不是w3c推荐的标准，且兼容性不好，这里就不深入讨论了。如果想实现类似的效果，通过js完全可以实现。

———————————————————————————
本文部分内容摘自CSDN博主「姜皓」的原创文章，文章链接：https://blog.csdn.net/jianghao233/article/details/80534835

huzhenv5

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css —— 文档流，position详解

文章目录一些基本概念文档流position简介一些基本概念在讲position属性之前，我们先要了解一些基本概念，有助于我们深入理解position的每个值的特点文档流我们来看看什么是文档流(normal flow)，下面是 www.w3.org 的描述：Normal flowBoxes in the normal flow belong to a formatting contex...
复制链接

扫一扫