认识CSS Position属性

最新推荐文章于 2022-07-05 23:06:21 发布

imdongrui

最新推荐文章于 2022-07-05 23:06:21 发布

阅读量348

点赞数

分类专栏：前端技术文章标签： position 文档流 relative

本文链接：https://blog.csdn.net/D578332749/article/details/103769977

版权

前端技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

Position属性的基础概念
拓展应用
- 曲线救国实现不占文档流的relative
参考文档

Position属性的基础概念

首先我们先回顾下position的概念知识：

position是是一个CSS属性，顾名思义，他是用来规定元素的定位类型的。

position有5个可选值

static：默认值，没有定位，元素出现在正常的文档流中，top,bottom,left,right,z-index声明均无效。

absolute：绝对定位，相对于第一个非static定位的父元素进行定位，元素通过top,bottom,left,right属性进行定位，绝对定位的元素不在文档流中占据位置。

relative：相对定位，相对于该元素原本正常的位置进行定位，元素通过top,bottom,left,right属性进行定位，相对定位的元素会在文档流中占据位置。

fixed：绝对定位，相对于浏览器窗口进行定位，元素通过top,bottom,left,right属性进行定位，进行该定位的元素会脱离文档流。

inherit：该元素会继承父元素的position属性值。

文档流与文本流

文档流

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.

In CSS 2.1, a box may be laid out according to three positioning schemes:

Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

文档流的英文名为Normal Flow，以上是W3中一些Normal flow相关的描述，大家都知道HTML的盒子模型，其实我们的HTML页面就是通过一个个的小盒子构建起来的，类似于堆积木。

文档中说HTML页面中的小盒子是属于一个格式化上下文的，可能是块级也可能是行内，但不会同时是两者，这里我觉得可以理解为我们的积木有不同的形状，有的是一大块，有些只是嵌进去的一小块。对于这里所说的context我不是很理解，感觉是说块级元素与行内元素是分开在不同的上下文中进行管理的，有明白的大佬请指点迷津。

那么什么是文档流，我的理解是，这一堆小盒子排列出来的一个整体，就是文档流，这是小盒子们没有做特殊的定位处理时按照规定进行的一个排列，所以叫做Normal Flow，而如果通过特殊定位处理使得某些小盒子不在这个正常的排列整体中，而是悬浮在上面一层想放哪放哪，这就是所谓的脱离文档流。

通常要使一个元素脱离文档流，有三种方式：

设置position属性为absolute；
设置position属性为fixed；
为元素设置float属性；

absolute和fixed可以理解为一种方式，都是对元素进行绝对定位，从W3的文档可知道，绝对定位的元素是完全脱离了文档流的，它对它的兄弟姐妹元素没有任何的影响。

float比较特殊，它在一开始是根据normal flow来计算排列位置的，然后它会脱离文档流，在原来位置基础上尽可能地向左边或右边靠，如果左边或右边有其它非float元素，则float元素会将其向反方向挤动。

文本流

W3的文档中并没有关于文本流的专门叙述，但文档中有出现Text flows的字眼，应该就是我们平常所说的文本流了，其实指的就是HTML中的文本字符串，而我们平常所说的是否脱离文本流，指的是当一个元素周围有文本时，文本是会围绕在它周围排布，还是会直接出现在它的下面，围绕排布时就是未脱离文本流，直接出现在下面时就是脱离文本流。

这个通常是用于描述float元素时使用的，但实际测试float元素不仅仅是会挤压使文本围绕其排列，其他元素依然会被float挤压位移，比如button等等，所以个人觉得文本流这个描述似乎并不准确。

拓展应用

曲线救国实现不占文档流的relative

relative是经常会使用的position属性，它可以让我们灵活地调整元素的位置，但是relative定位的元素是要在文档流中占位置的，这就导致我们定位后，在原来的位置会留下一个空白。

我们知道absolute定位的元素是不会在文档流中占位置的，那么我们可以将absolute和relative结合起来。

例如我们需要一个相对定位的a标签元素，

<a style="position: relative;top: 17px;left: 100px;" href="XXX">我是一个需要定位的a标签</a>

但我们不想它在文档流中占有位置从而留下空白，那么我们可以这样写：

<div style="position: relative;">
	<a style="position: absolute;top: 17px;left: 100px;" href="XXX">我是一个需要定位的a标签</a>
</div>

我们在a元素外再加一层div，并让这个div进行relative定位，然后让a元素进行absolute定位，由于这个a元素是absolute定位，所以它脱离了文档流，那么可以理解为在normal flow中这个div是没有任何内容的，它占的位置当然也是0，页面上不会有任何显示，然后这个relative的a元素会根据第一个position为非static的父级元素进行定位，这里当然就是根据这个div来进行定位了，最终效果就是div正常占据文档流但不显示，而a脱离文档流根据div作为基准位置进行位置调整。