文档流

一、什么是文档流？
“流”，我们在生活中经常听到这个词，比如水流，电流。就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。
那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。
当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。

二、块级元素与行内元素
块级元素：顾名思义，这个元素是“一块”，那么作为一个块，它就应该有自己的宽度和高度。而且它比较霸道，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外），一般作为容器使用，常见的块级元素有：from、select、 textarea、h1-h6 、table 、button 、hr 、p 、ol 、ul等。

结合以上内容，块级元素拥有以下特点：
1.每个块级元素都是独自占一行。
2.元素的高度、宽度、行高和边距都是可以设置的。　　
3.元素的宽度如果不设置的话，默认为父元素的宽度。

行内元素：显然，这种元素存在于一行内，且能与别的行内元素共同享有一行。常见的行内元素有：span、input、a、em、strong、b、br、img、select、button等。

那么行内元素拥有的特点如下：
1.每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。
2.行内元素设置width, height无效（此处有坑，请往下看），宽度随元素的内容而变化。
3.行内水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

三、替换元素和非替换元素
细心的大家肯定发现了，像< img >、< input >、< select >、< textarea >等，它们也是行内元素呀，明明就可以设置宽高啊，那这里就有问题了。其实并不是所有的行内元素都不能设置宽高的。
行内元素也分为两种：替换元素和非替换元素。

替换元素：
浏览器根据元素的标签和属性，来决定其的具体显示内容的元素，常见的有：< img >、< input >、< select >、< textarea >、< object >。比如浏览器根据< img >标签的src属性显示图片。根据< input >的type属性决定显示输入框还是按钮，它们的宽度和高度是可以设置的。

非替换元素：
内容直接表现给用户端的元素称为成为非替换元素，常见的有：< span>、< p >、< label >等。例如< span >，它会将开始和结束标签中的内容直接在浏览器上展示出来。

四、脱离文档流
所谓脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，其他盒子在定位的时候，会当做没看到它（余生你不必再指教了），两者位置重叠都是可以的，但是依然在DOM树中存在。
那么会使元素脱离文档流的情况有哪些呢？

1.float产生的浮动
使用float脱离文档流时，虽然其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
            float: left;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
        }
    </style>
</head>
<body>
    <div class="demo1">这是demo1的文本</div>
    <div class="demo2">这是demo2的文本</div>
</body>
</html>

代码运行效果：
在这里插入图片描述
2.position:absolute;
absolute是绝对定位，绝对定位的元素以第一个非static父元素为参照。如果没有非static的父元素，则以body为参照。
下面是例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
            position: absolute;
            top: 50px;/*给demo2一个绝对定位，并且距离body顶部 50px*/
        }
        .demo3{
            width: 200px;
            height: 200px;
            border: 5px solid black;
        }
        body{
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="demo1">这是demo1的文本</div>
    <div class="demo2">这是demo2的文本</div>
    <div class="demo3">这是demo3的文本</div>
</body>
</html>

代码效果如图：
在这里插入图片描述
我们可以看到第二个div它相对body顶部向下移动了50px；

3.position:fixed;
完全脱离文档流，相对于浏览器窗口进行定位，也就是这个div固定在浏览器窗口上了，不论我们怎么拖动滚动条都无法改变它在浏览器窗口的位置。
下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
            position: fixed;
            right: 50px;
        }
        .demo3{
            width: 200px;
            height: 200px;
            border: 5px solid black;
        }
        body{
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="demo1">这是demo1的文本</div>
    <div class="demo2">这是demo2的文本</div>
    <div class="demo3">这是demo3的文本</div>
</body>
</html>

下面开始讲故事帮助大家理解脱离文档流：
一个帅帅的男生（div1）和一个可爱的女孩纸(div2)，他们喜欢着对方，有一天，他们在一起了，从此过上了幸福的生活……
故事怎么可能是这样子的（皮一下）
随着时间的推移，在某些事情的影响下（float、fixed、absolute），他们发现对方有很多的缺点，并不是完美的，有一天终于无法忍受对方，“咱们分手吧！”div1说到，balabala，他们分手了（div1脱离了文档流）。“你就当我死了吧”，div1说到。虽然男孩纸div1和女孩纸div2都还在这个世界上过着自己的生活（div1和div2都还存在于DOM树中），但是他们让对方死在了自己的心中（盒子在定位的时候，会当做没看到它）。狗血的故事讲完了。

Position属性有以下四个取值：

static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。

relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。

absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。

fixed：绝对定位，相对于浏览器窗口进行定位，同样是使用top、bottom、right、left。

四种取值中，除了static之外，其他属性都可通过z-index进行层次分级

-static
static（静态定位）是默认值，元素出现在正常的流中。不会受到top, bottom, left, right影响。

-relative
定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。

注：元素脱离正常的文本流意思是外观位置发生了改变，即是实际页面的可以看到的变化，文本流的位置依然存在指的是默认的位置（设置之前的位置）还在，相当于“虽然设置了位置偏移，但元素的灵魂还在原地~”
在这里插入图片描述

他是默认参照父级的原始点为原始点定位元素，无父级则以文本流的顺序在上一个元素的底部为原始点定位元素位置，并配合top、bottom、right、left设置偏移确定元素定位：

一般情况下以父级的左上角为原定，在没有父级的时候，他是参照浏览器左上角，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开。

如果父级没有设定position属性，仍旧以父级的左上角为原点进行定位。

如果父级设定position属性，不管是取哪个值，都以父级的左上角为原点进行定位。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位。
以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。

-absolute
定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。（这里是与relative的第一个不同点）

注：跟relative一样，这里也是实际上可以看到的布局发生了变化，跟relative不同的是，此时它的“灵魂”不在原地，也不在新的位置，而是不复存在了。
在这里插入图片描述

在这里要注意别跟Fixed值混淆，absolute并不是永远根据浏览器窗口进行定位的，这是Fixed的特性，absolute要更加复杂：

一般情况下以父级的左上角定位，在没有父级的时候，他是参照浏览器左上角
（这与relative完全一致）；
如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。（这里是与relative的第二个不同点）；

如果父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由偏移设置(top、bottom、left、right)决定；（这与relative完全一致）

如果父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由偏移设置(top、bottom、left、right)决定；（这与relative完全一致）。
即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。（这里是与relative的第三个不同点）

-fixed
其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。

fixed元素与文档流无关，可重叠也不回影响其他元素布局，只一直根据浏览器左上角定位。

-relative和absolute的区别
在这里插入图片描述
-z-index属性
z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

总的来说就是：
1.先看元素的父子关系，子级在上父级在下；
2.再看元素的z-index定义的整数值大小，数值大在上，数值小在下；
3.如果是同一级元素并且z-index值相同，就看元素在html文档中流的顺序，先写的会被后写的覆盖。
注：使用static 定位或无position定位的元素z-index属性是无效的。

position 以及参数总结

1.position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流
2.position: relative; 相对于自己在文档流中的初始位置偏移定位。
3.position: fixed; 相对于浏览器窗口定位。
4.position: absolute; 是相对于父级非position:static 浏览器定位。

如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。
这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。
如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。

来源：CSDN

作者：qq_43592587

链接：https://blog.csdn.net/qq_43592587/article/details/104804454

标签

position