What is absolute positioning in css

In CSS, absolute positioning is a positioning method that makes the position of an element independent of the document flow. The element box set to absolute positioning is completely removed from the document flow and positioned relative to its containing block; by default, the absolutely positioned position is relative to the browser, and is positioned in conjunction with top, right, bottom, and left.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, absolute positioning is a positioning method that makes the position of an element independent of the document flow.

An element box set to absolute positioning is completely removed from the document flow and positioned relative to its containing block, which may be another element in the document or the initial containing block. By default, the position of absolute positioning is relative to the browser, and is positioned with top, right, bottom, and left.

The space that the element originally occupied in the normal document flow is closed, as if the element did not exist. The element generates a block-level box after positioning, regardless of what type of box it originally generated in the normal flow.

Let’s take a closer look at absolute positioning (absolute). In fact, absolute positioning absolute and floating float are partially similar; if you can understand floating float, it will be of great help to understand absolute positioning absolute.

Let’s start with the similarities between absolute and float: Wrapping and Highly deceptive

Wrapping

It is said that a picture is worth a thousand words (the only difference is: p in the picture below adds absolute)

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="What is absolute positioning in css" >
</p>
<p style="border:4px solid red; position: absolute;">
  <img  src="img/25/2.jpg" / alt="What is absolute positioning in css" >
</p>

Once you add absolute or float to an element, it is equivalent to adding absolute to the element. Added display:block;. What does that mean? For example, the default width of the inline element span is adaptive, and it will not work if you add width to it. To set width, you need to set span to display:block. But if you add absolute or float to span, the display attribute of span will automatically become block, and the width can be specified. Therefore, if you see absolute/float and display:block appearing at the same time in CSS, then display:block is redundant CSS code.

High deception

In the above example, absolute is added to the p in the outer layer of the picture, so the high degree of deception is not reflected well, so absolute is moved to the inner picture. on, the effect comes out:

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="What is absolute positioning in css" >
</p>
<p style="border:4px solid red;">
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="What is absolute positioning in css" >
</p>

If you have read the detailed explanation of CSS floating float, you will find that the effect is the same. But the principles behind them are actually different and not exactly the same. You can see it by adding some text:

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="What is absolute positioning in css" >
</p>
<p style="border:4px solid red;">
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="What is absolute positioning in css" >
  我是一个绝对定位的absolute元素
</p>

It is obvious from the picture that the text is covered by the picture, which is different from float. float deceives the parent element into thinking that its height has collapsed, but the float element itself is still in the document flow, and the text will surround the float element and will not be obscured.

But absolute can no longer be regarded as deceiving the parent element, but has a hierarchical relationship. If the parent element in the normal document flow is considered a mortal, then absolute has become an immortal. In today's terms, it is no longer in the same dimension. From the perspective of the parent element, the image set to absolute has completely disappeared, so the text is displayed from the far left. The absolute level is high, so the picture covers the text.

I remember when I first came into contact with CSS, which was still a scumbag with a combat power of 5, and I knew that absolute could have the concept of hierarchy, I mistakenly thought that I had completely understood it. Now that I think about it, it is really confusing (of course this It’s not a bad thing. Whenever you feel that your past self was like a piece of tofu, it means you have made progress. On the other hand, if you always think about how you were back then, it means you are still resting on your laurels).

After having the above foundation, you also need to understand the following characteristics of absolute

• How to determine the anchor point
• Love and kill with relative
• Relationship with z-index
• Reduce the overhead of redrawing and reflow

How to determine the anchor point

Once absolute is layered, The first question that arises is where to tell the browser to display the element. For elements in the ordinary document flow, the browser can calculate the position of the element based on the size and position of its parent, child, and sibling elements. But what to do after layering? The basic idea is as follows:

The first case: the user only specifies absolute for the element, but does not specify left/top/right/bottom. At this time, the position of the upper left corner anchor point of the absolute element is the position of the element in the normal document flow. As in the above illustration, the picture panda is the first child of the parent element, so the upper left corner anchor point is the upper left corner of the parent element's content.

If you change the order of the picture panda and the text below so that it becomes the second child of the parent element, a picture is worth a thousand words:

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="What is absolute positioning in css" >
</p>

结论重复一遍：未指定left/top/right/bottom的absolute元素，其在所处层级中的定位点就是正常文档流中该元素的定位点。

第二种情况：用户给absolute元素指定了left/right，top/bottom

先简单点，让absolute元素没有position:static以外的父元素。此时absolute所处的层是铺满全屏的，即铺满body。会根据用户指定位置的在body上进行定位。

只指定left时，元素的左上角定位点的left值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="What is absolute positioning in css" >
</p>

只指定right时，元素的右上角定位点的right值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="What is absolute positioning in css" >
</p>

只指定top时，元素的左上角定位点的top值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="What is absolute positioning in css" >
</p>

只指定bottom时，元素的左下角定位点的bottom值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="What is absolute positioning in css" >
</p>

通过对left/top/right/bottom的组合设置，由于没有position:static以外的父元素，此时absolute元素可以去任意它想去的地方，天空才是它的极限。

和relative相爱相杀

通常我们对relative的认识是（好吧，我承认，这是我战5渣渣时的认识。如果你是弗利萨，可以鄙视这句话）：relative主要用于限制absolute

上面已经说了，如果absolute元素没有position:static以外的父元素，那将相对body定位，天空才是它的极限。而一旦父元素被设为relative，那absolute子元素将相对于其父元素定位，就好像一只脚上被绑了绳子的鸟。

比如你要实现下图iOS里APP右上角的红色圈圈

通常的做法是将APP图片所处的p设成relative，然后红色圈圈设成absolute，再设top/right即可。这样无论用户怎么改变APP图片的位置，红色圈圈永远固定在右上角，例如：

.tipIcon {
  background-color: #f00;
  color: #fff;
  border-radius:50%;
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  right:-10px;  //负值为自身体积的一半
  top:-10px;
}

<p style="display: inline-block;position:relative;">
  <img  src="img/25/2.jpg" / alt="What is absolute positioning in css" >
  <span class="tipIcon">6</span>
</p>

这样做效果是OK的，兼容性也OK。但CSS的世界里要实现一个效果可以有很多种方式，具体选用哪个方案是见仁见智的。我比较看重的标准：一个是简洁，另一个是尽量让每个属性干其本职工作。

用这两个标准看待上述实现方法，应该是有改进的空间的。首先外层p多了relative未能简洁到极致。其次relative的本职工作是让元素在相对其正常文档流位置进行偏移，但父层p并不需要任何位置偏移，之所以设成relative唯一的目的是限制absolute子元素的定位点。因此在我看来这并没有让relative干其本职工作。好比小姐的本职工作是服务业，顺便陪客户聊聊天，但纯聊天聊完一个钟，恐怕会被投诉。

（学习视频分享：css视频教程）

The above is the detailed content of What is absolute positioning in css. For more information, please follow other related articles on the PHP Chinese website!