css定位方案

定位方案
一个盒元素可以根据3种定位方案中的一种来布局。这三种方案分别是：正常文档流布局, 浮动布局 和 绝对定位布局。您可能熟悉浮动和绝对定位布局的方式，因为我们在编写CSS时经常与这些方案进行交互。 当一个元素未浮动或绝对定位布局时，就是正常文档流布局。

正常文档流布局
正常文档流描述了默认的定位方案，“in-flow”描述符合此要求的元素。 在文档流中您可以认为是根据其源的顺序和格式化上下文布局的元素的自然位置。

浮动布局
Float（浮动）是一个CSS属性，它使一个元素从正常流中跳出来，并尽可能地向左或向右偏移，直到它接触到其上一级的盒元素或另一个浮动元素的边缘。 当这种情况发生时，文本和内联元素将包围浮动元素。

通常如果不设置，元素的高度将适应其所有后代元素。 当元素浮动时，它们从正常文档流跳出来，这意味着容器不会调整其高度以将其清除。

正是这种行为允许多种文本、标题和其他元素对浮动内容进行流式包裹。但有时这是有问题的。清除浮动和建立一个新的块格式化上下文将使容器清除其浮动的子元素。这种技术允许使用浮动来进行布局，很久之前这就已经成为web开发技术之一了。这种技术仍然很重要，但它也正逐渐被新的布局技术所取代，比如Flexbox和Grid。

绝对定位布局
绝对定位的元素完全从文档流中去除，不同于浮动元素，它们对周围的内容没有影响。

具有相对定位的容器允许您使用绝对定位来控制后代元素的偏移量。

相对定位的元素也可以被给定一个偏移量，但是这个偏移量是与元素的正常位置相对的，而不是另一个相对的容器。

CSS的top, bottom, left 和 right 属性用来计算“盒容器的偏移量”。这些属性不是二维偏移，而是每个边缘相对于其容器的内容盒子进行定位。

具有重叠偏移的定位元素可以导致元素占用相同空间而发生重叠问题。堆叠上下文可以解决这个问题。