单个“位置：绝对”对一个对象有什么作用 <div> 标签？
[英]What does single `position: absolute` do to a <div> tag?
问题描述
I've a simple, silly question. 
我有一个简单而愚蠢的问题。 What does position: absolute do to a div tag? position: absolute对div标签有什么作用？
Here's an example. 这是一个例子。 Let's say I've three <div> tags: 假设我有三个<div>标签：
<div id="a"></div>
<div id="b" style="position: absolute"></div>
<div id="c"></div>
From my experiments position: absolute somehow "pushes" #b outside of regular block element flow and it appears between #a and #c , with #a directly following #c and #b just floating there below or above them. 从我的实验position: absolute来看position: absolute #b position: absolute以某种方式“推动” #b到规则块元素流之外，并且出现在#a和#c之间，其中#a紧随#c和#b浮动在它们下面或上面。
What exactly is happening? 到底是什么情况？
5 个解决方案
解决方案1
2 2015-08-20 22:42:17
正如您所注意到的， position: absolute将元素从正常布局流程中完全删除，使您可以随意将其放置在所需的位置。
解决方案2
2 2015-08-20 22:44:10
The position attribute controls the location based on which ever parent element has a position defined. position属性根据哪个父元素定义了position来控制position 。 Unless a value is set explicitly for an element on the page the first parent with position is the <body> element. 除非为页面上的元素显式设置一个值，否则第一个具有position父元素是<body>元素。
Once you set a position value for an element you can then place elements within it. 一旦为元素设置了position值，就可以将元素放置在其中。
As a rule I always set the nearest parent to have position: relative which is essentially the normal position it would have. 通常，我总是将最近的父级设置为具有position: relative ，这实际上是它将具有的正常位置。 Then I can position elements within it. 然后，我可以在其中放置元素。
position: absolute will place the element using co-ordinates based on the top , bottom , left and right attribute values. position: absolute将使用基于top ， bottom ， left和right属性值的坐标来放置元素。
解决方案3
0 2015-08-20 22:52:19
When you add the position:absolute; 添加position:absolute; property to block b , you basically ripped that div div out of the layout's flow. 属性到block b ，您基本上将div div从布局的流程中删除了。 The absolute div (block b) ignores it's next neighboring element(s) in the layout and vice versa. 绝对div（方框b）会忽略布局中的下一个相邻元素，反之亦然。
As you can see here: http://jsfiddle.net/AndrewL32/65sf2f66/12/ block C is positioned right after block A as though block B doesn't exist. 如您在此处看到的： http : //jsfiddle.net/AndrewL32/65sf2f66/12/ block C 紧接在block A ，就好像block B不存在一样。 In the same way, block B ignore block C and position itself next to A. 以相同的方式， block B忽略block C并将其自身定位在A旁边。
An element with position: absolute;
However;
解决方案4
0 2015-08-20 22:52:29
With CSS positioning, you can place an element exactly where you want it on your page. 通过CSS定位，您可以将元素准确地放置在页面上所需的位置。
When you are going to use CSS positioning, the first thing you need to do is use the CSS property position to tell the browser if you're going to use absolute or relative positioning. 当您要使用CSS定位时，您需要做的第一件事就是使用CSS属性位置来告诉浏览器您要使用绝对定位还是相对定位。
Both Postion are having different features.In Css Once you set Position then you can able to use top,right,bottom,left attributes. 这两个Postion具有不同的功能。在CSS中，一旦设置了Position，就可以使用top，right，bottom，left属性。
Absolute Position 绝对位置
An absolute position element is positioned relative to the first parent element that has a position other than static. 绝对位置元素相对于具有非静态位置的第一个父元素放置。
Relative Position 相对位置
A relative positioned element is positioned relative to its normal position. 相对定位的元素相对于其正常位置进行定位。
To position an element relatively, the property position is set as relative. 为了相对定位元素，将属性位置设置为相对。 The difference between absolute and relative positioning is how the position is being calculated. 绝对位置和相对位置之间的差异是位置的计算方式。
解决方案5
0 2015-08-20 23:12:59
According to Positioning schemes , 根据定位方案 ，
In CSS 2.1, a box may be laid out according to three positioning schemes:
- Normal flow .
- Floats .
- Absolute positioning .
Therefore, adding psotion: absolute to your element will make it positioned according to the absolute scheme, instead of the normal flow one. 因此，在元素上添加psotion: absolute将使它根据绝对方案而不是正常流程一个进行定位。
According to The position property , position: absolute means this: 根据position属性 ， position: absolute表示：
The box's position (and possibly size) is specified with the
top,right,bottom, andleftproperties.top，right，bottom和left属性指定。 These properties specify offsets with respect to the box's containing block .Absolutely positioned boxes are taken out of the normal flow.
Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.
Also, according to Absolute positioning , 另外，根据绝对定位 ，
In the absolute positioning model, a box is explicitly offset with respect to its containing block.
An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants.
However, the contents of an absolutely positioned element do not flow around any other boxes.
They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
Absolutely positioning is related to display and float , as explained in Relationships between 'display', 'position', and 'float' . 绝对定位与display和float相关，如“显示”，“位置”和“浮动”之间的关系所述 。 Basically, 基本上，
- An absolutely positioned box is not floated 绝对定位的盒子没有漂浮
- An absolutely positioned box is blockified as follows: a display of
inline-tablebecomestable;绝对定位的框如下所示： inline-table的显示变为table； andinline,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption,inline-blockbecomeblock和inline，table-row-group，table-column，table-column-group，table-header-group，table-footer-group，table-row，table-cell，table-caption，inline-block变成block
According to Layered presentation , absolutely positioned elements are painted in another layer: 根据分层表示 ，绝对定位的元素将绘制在另一层中：
Within each stacking context, the following layers are painted in back-to-front order:
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow, non-inline-level, non-positioned descendants.
- the non-positioned floats.
- the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- the child stacking contexts with positive stack levels (least positive first).
The position (and the size, if width or height are auto ) of an absolutely positioned element is determined by its containing block and its top , right , bottom and left properties. 绝对定位的元素的位置（以及大小，如果width或height为auto ）由其包含的块及其top ， right ， bottom和left属性确定。 If those are not specified, their value will be auto . 如果未指定，则其值为auto 。 The algorithms are explained in detail here and here . 此处和此处将详细说明算法。 Basically: 基本上：
- The element will be placed at the same position it would have if it had
position: staticandfloat: none.元素将放置在与以下位置相同的position: static和float: none。 - An
autowidth is calculated by shrink-to-fit: min(max(preferred minimum width, available width), preferred width).auto宽度是通过收缩拟合来计算的：min（max（max（首选最小宽度，可用宽度），referred宽度）。 - An
autoheight is calculated as usual for block formatting context roots照常计算auto高度，用于块格式化上下文根
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.