Question

我是一个简单而愚蠢的问题。 position: absolute对div代码做了什么？

这是一个例子。让我们说我有三个<div>标签：

<div id="a"></div>
<div id="b" style="position: absolute"></div>
<div id="c"></div>

从我的实验position: absolute以某种方式＆＃34;推动＆＃34; #b位于常规块元素流之外，它出现在#a和#c之间，#a直接跟在#c和#b之后或者在他们之上。

到底发生了什么？

Answer 1

正如您所注意到的那样，position: absolute会将元素从正常的布局流程中完全删除，让您随意将其放置在任意位置。

Answer 2

position属性根据父元素定义position的位置来控制位置。除非为页面上的元素明确设置了值，否则position的第一个父元素是<body>元素。

为元素设置position值后，您可以在其中放置元素。

作为一项规则，我总是将最近的父级设置为position: relative，这基本上是它将具有的正常位置。然后我可以在其中定位元素。

position: absolute会根据top，bottom，left和right属性值使用坐标放置元素。

Answer 3

根据Positioning schemes，

在CSS 2.1中，可以根据三个定位来布置框   方案：


Normal flow。

Floats。

Absolute positioning。

因此，将psotion: absolute添加到元素将使其根据绝对方案而不是正常流程定位。

根据The position property，position: absolute表示：

框的位置（可能是大小）用。指定   top，right，bottom和left属性。   这些属性指定了关于框containing block的偏移量。

绝对定位的盒子从正常流动中取出。这个   意味着它们对后来的兄弟姐妹的布局没有影响。

此外，尽管absolutely positioned框有边距，但它们也有   没有任何其他边距的collapse。

另外，根据Absolute positioning，

在绝对定位模型中，显式偏移框   尊重其内容。它从正常流程中删除   完全（它对后来的兄弟姐妹没有影响）。

绝对定位的框为其建立一个新的包含块   正常流动儿童和绝对（但不是固定）定位   后代。

但是，绝对定位元素的内容不会流动   在任何其他盒子周围。

它们可能会遮挡另一个盒子的内容（或被遮挡   他们自己），取决于重叠的stack levels   框。

绝对定位与display和float相关，如Relationships between 'display', 'position', and 'float'中所述。基本上，

绝对定位的盒子没有浮动
绝对定位的框被屏蔽如下：inline-table的显示变为table;和inline，table-row-group，table-column，table-column-group，table-header-group，table-footer-group，table-row，table-cell，{ {1}}，table-caption成为inline-block

根据Layered presentation，绝对定位的元素被绘制在另一层中：

在每个堆叠上下文中，绘制了以下图层   从前到后的订单：


构成堆叠背景的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

流入的，非内联级别，未定位的后代。

未定位的花车。

in-flow，内联级别，非定位后代，包括内联表和内联块。

堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。

具有正堆栈级别的子堆叠上下文（最少积极的第一个）。

绝对定位元素的位置（以及大小，如果block或width为height）由其包含块及其auto，{{ 1}}，top和right属性。如果未指定，则其值为bottom。详细解释了算法here和here。基本上是：

如果元素有left和auto，则该元素将放置在相同的位置。
position: static宽度是通过收缩适合度计算的：min（最大值（首选最小宽度，可用宽度），首选宽度）。
计算float: none身高as usual for block formatting context roots

Answer 4

当您将position:absolute;属性添加到block b时，您基本上会从布局的流程中删除该div div。绝对div（块b）忽略它在布局中的下一个相邻元素，反之亦然。

正如您在此处所见：http://jsfiddle.net/AndrewL32/65sf2f66/12/ block C位于block A之后，好像block B不存在。以同样的方式，block B忽略block C并将自己定位在A旁边。

具有 position：absolute; 的元素相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。

然而;如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。

Answer 5

使用CSS定位，您可以将元素准确放置在页面上的所需位置。

当您打算使用CSS定位时，首先需要使用CSS属性位置告诉浏览器您是否要使用绝对定位或相对定位。

两个位置都有不同的功能。在Css中设置位置后，您可以使用顶部，右侧，底部，左侧属性。

绝对位置

绝对位置元素相对于第一个具有静态位置的父元素定位。

相对位置

相对定位元素相对于其正常位置定位。

要相对定位元素，属性位置设置为相对。绝对和相对定位之间的差异是如何计算位置。

单个`position：absolute`对<div>标签做了什么？

5 个答案: