1. Write at the front

The CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series: CSS series If a property name is “position” and a property name is “float”, they are siblings. A: Position: absolute and position: relative b: absolute and relative C: relative Hehe ~~~~, don’t worry, this is the purpose of writing this article.

2. The characteristics of Absolute

Before introducing absolute, there is the following common CSS code:

/* CSS code */
.father{
    border: 2px solid deeppink;
    width: 200px;
}
.son {
    position: absolute;
    font-size: 0;
    border: 2px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}
Copy the code

2.1 wrap

Then you have the following HTML code:

<div class="father">
    <! Son1: static son1: static son1: static son1: static son1: static son1: static son1: static son1: static son1: static son1: static son1
    <div class="son1">
        <img src=".. /.. /lib/img/mm1.png">
    </div>
</div>
<br/>
<br/>

<div class="father">
    <div class="son">
        <img src=".. /.. /lib/img/mm1.png">
    </div>
</div>
Copy the code

The final display is as follows:

In this case, the only difference between SON1 and SON is that son1’s position is set to static. The width of the.father element is set to 200px and the img element is a 128px image, so the absolute positioning element is “enveloping” and the width is 128px of the image inside.

Since the absolute positioning element width is “wrapped”, the following CSS notation is redundant:

.wrap{ display: inline-block; // No need to position: absolute; }Copy the code

2.2 Height collapse

Based on the image above, the height of the parent div is not extended by the quilt element (the pink area). This effect can be called “height collapse”. The reason for the height collapse is that the floating element is separated from the normal document flow, so div.father thinks it has no child elements, so the height collapse occurs.

If you add a child element to the.father element, it looks like this:

<! - HTML code - >
<div class="father">
    <div class="son">
        <img src=".. /.. /lib/img/mm1.png">
    </div>Belle 1, belle 2, belle 3, belle 4, belle 5</div>
Copy the code

The effect in the browser is as follows:

Unlike float, it is clear that the text is obscured by the image. Because the float element itself is still in the document flow, the text will surround the float element and will not be obscured, whereas the image element with absolute is hierarchical and out of the normal document flow. From the perspective of the parent element, the image has completely disappeared, so the text is displayed from the far left. Absolute has a high level, so the image obscures the text.

2.3 block,

Blocky means that once the attribute of position is absolute or fixed, its display computed value is either block or table. You can copy the following code to the browser console:

var span = document.createElement('span')
document.body.appendChild(span)
console.log('1. + window.getComputedStyle(span).display)
// Set the absolute position of the element
span.style.position = 'absolute'
console.log('2.' + window.getComputedStyle(span).display)
document.getElementById("aa").style.display = "block"
Copy the code

The result in the browser console is as follows:

1.inline
2.block
Copy the code

2.4 summary

For the introduction to Absolute above, should we understand that they are brothers compared to the float property? If you have to think otherwise, just understand the nature of Absolute. Most front-end developers should be familiar with this, but it would be too much to expect if this article just covered it! The fluid and relative properties of Absolute are the focus of this paper.

Absolute fluid and relative characteristics

3.1 Relative characteristics of Absolute

If an element’s position attribute is set to: position: absolute, left/top/right/bottom is not set, and all of its ancestors are non-position elements, where will it be displayed?

Before I knew more about absolute, I thought that this element was displayed in the upper left of the browser window. In fact, this was a recognition of absolute positioning error. Therefore, when using absolute, many people must first set the parent element position: Relative, set the left/top/right/bottom of the absolute position element, and even set the z-index of the absolute position element, which is actually still in the current position. Let’s take the example below to verify:

 <! - HTML code - >
<div class="father">
    <div class="pa box"></div>
</div>
Copy the code
/* CSS code */
.father{
    border: 2px solid deeppink;
    width: 100px;
    height: 100px;
}
.pa{
    position: absolute;
}
.box{
    background-color: #cdcdcd;
    width: 50px;
    height: 50px;
}
Copy the code

As shown below, the.box element is still displayed in its current location, rather than in the upper left of the browser window:

On the homepage of JINGdong Mall, there is an effect like this:

Then we open the debug window and view the HTML and CSS code as follows:

Here in the CSS code top:0; Left :0 is completely redundant code and can be omitted. Because, without setting the absolute location element left/top/right/bottom, it is still in the current position, just out of the normal document flow.

Absolute is, in fact, a relatively independent CSS property, its style and behavior independent of other CSS properties. Therefore, if an element has absolute positioning and no left/top/right/bottom is set, this positioning property can be called “undependent absolute positioning”, which is essentially “relative positioning” and simply does not occupy any CSS flow size.

Dependency free absolute positioning can be very useful in real-world development, so here are a few common examples.

1) Positioning of various ICONS

Let’s take the course list on the front page of MOOCs as an example:

<div>
    <div class="box"></div>
    <i>Hot</i>
</div>
Copy the code

The core CSS code is shown below:

Do not need the help of top/right/bottom/left and position: relative to complete the layout of small ICONS. The advantages of this layout over position: Relative and right/ Top are as follows:

  • Low maintenance costs. If you want to delete the image later, just remove the HTML and CSS code that corresponds to the icon. It does not affect other elements
  • High robustness. If the image gets bigger or the text gets longer, we don’t need to change the CSS code for the small icon and it will still position well.

Here’s another example that’s used a lot in real life: An icon at the beginning of a paragraph of text, as shown below:

This layout can also be implemented with the help of dependency free positioning, and the code is simple and efficient, as shown below:

<div class="email-wrapper">
    <i class="icon-email"></i>
    <span class="icon-msg">Please enter your email address:</span>
</div>
Copy the code
.email-wrapper{
    display: inline-block;
    height: 20px;
    padding-left: 20px;
    /*font-size: 0; * /
}
.icon-email{
    position: absolute;
    margin-left: -20px;
    width: 20px;
    height: 20px;
    background: url(".. /.. /lib/img/email.png") center center no-repeat;
    background-size: contain;
}
.icon-msg{
    display: inline-block;
    line-height: 20px;
    vertical-align: top;
}
Copy the code

2) Check error

In the actual development, we have a lot of form verification, when the verification fails, there will be some error message to the user, as shown in the following picture:

Normally, error messages can be placed at the bottom of the input box, but when an error message appears, the following content will move down, and when the error message disappears, the following content will move up again, resulting in poor user experience. Another option is to display it on the right side of the input box, but by default the container is horizontally centered and not wide enough. If an error message is displayed, the container will not be wide enough. In this case, we can also directly add a CSS class to the error message with the help of “no dependency positioning”, as shown below:

.msg-error{
	position: absolute;
	margin-left: 10px;
}
Copy the code

Whether the width of the input box is increased or decreased, the prompt will follow the input box. Compared to position: Relative and Right/Top layouts, this method has less code, higher fault tolerance, and lower maintenance costs.

There are many applications of absolute positioning without dependence, which are not introduced here. Interested students can refer to Zhang Xinxu’s CSS World.

3.2 Absolute fluid characteristics

An absolute element becomes an absolute position element only when absolute encounters the left/top/right/bottom attribute. If the user specifies at least one left/right for absolute, the horizontal relative property is lost and the vertical relative property remains. If the user assigns at least one top/bottom to absolute, the horizontal relative property is preserved and the vertical relative property is lost. Such as:

<div class='box'></div>
.box{
    position: absolute;
    right: 0;
}
Copy the code

At this point, the relative properties of the element in the horizontal direction are lost and the element has the absolute positioning property, while the relative properties are still maintained in the vertical direction.

In the example above, when only the left or right attribute is present, the width of the div is 0 because of wrapping. However, if both Settings are left:0; Right :0, width is “format width”, width ADAPTS to box contains fast Content-Box, in other words, if the width of the box contains fast Conent-box changes, then the width of the box changes with it. Here’s an example:

<div class='box'></div>
.box{
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}
Copy the code

If the contain block of the. Box is the root element, the code above makes the. Box element completely cover the browser’s visual window, and if you resize the browser window, the.box size automatically changes with the browser’s size. Therefore, for the absolute positioning attribute with the opposite positioning attribute set, no matter whether the padding or margin is set, the space occupied by the absolute positioning attribute remains unchanged, but the content-Box changes, which is a typical fluid performance characteristic. Specific uses of fluid properties are described below.

4. Absolute and other attributes

Many properties in CSS have unintended effects when they need to be used with other properties. The following describes the effects of using Absolute with other CSS.

4.1 absolute and text – align

Text-align can control the position of absolute positioning elements, and achieve the layout effect of “back to the top” and “feedback” on the right side of the main window. The renderings are as follows:

The core code is as follows:

<! - HTML code - >
<div class="alignright">
    <span class="follow">
        <img src=".. /.. /lib/img/message.png">
        <img src=".. /.. /lib/img/top.png">
    </span>
</div>
Copy the code
/* CSS code */
.alignright{
    overflow: hidden;
    text-align: right;
}
.alignright:before{
    content: "\ 2002"
}
.follow{
    position: fixed;
    bottom: 100px;
    z-index: 1;
}
.follow img{
    display: block;
    margin: 10px;
    width: 20px;
    height: 20px;
    background-size: contain;
}
Copy the code

In this case, we use the :before pseudo-element, insert a space before it (\2002), and then set text-aligin: “Right”, the space is aligned to the right edge of the main structure, and the following fixed positioning elements (same as absolute positioning elements) are displayed outside the main structure due to the “non-dependent positioning” property. This layout is very useful in practical development, such as the floor navigation effect of a treasure in the picture below can be achieved in this way.

4.2 absolute and clip

In the actual development process, many times we in order to better SEO and barrier-free recognition, will hide some elements in the page, such as hide the following code in the name of the website these words:

/ * * / CSS code < a href = "#" class = "logo" > < h1 > this website name < / h1 > < / a >Copy the code

In order to hide the above text, there are several options available to us:

  • usedisplay:noneorvisibility:hidden. Cons: Screen readers ignore the text;
  • usetext-alignThe indentation. Cons: Screen readers won’t read if they indent too much outside the screen;
  • usecolor: transparent. Native IE8 browsers don’t support it, and text can still be selected.

With the help of the two attributes of Absolute and Clip, it can simultaneously meet the requirements of visual hiding and screen reading devices. The core code is as follows:

/* CSS code */
h1{
    position: absolute;
    clip: rect(0 0 0 0);
}
Copy the code

4.3 Absolute margin: Auto center

In actual work development, we may use the most is the following way to achieve horizontal and vertical centering of elements, the core code is as follows:

/* CSS code */
.box{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -10px;
    margin-right: -10px;
}
Copy the code

One drawback of this method is that you need to know the size of the element in advance, otherwise you can’t control the size of the margin negative.

If you don’t know the size of the element, you can use transform: Translate (-50%, -50%) replaces margin negative values. However, this method has some compatibility problems, which is only supported by IE9(-MS -), IE10+ and other modern browsers. In certain scenarios, wechat will flash back.

Before introducing another method, we first familiarize ourselves with the padding rule of margin: Auto:

  • If one side is fixed and one side is auto, auto is the size of the remaining space.
  • If you have auto on both sides, you split the rest of the space.

Therefore, the horizontal and vertical centralization effect can be achieved by using the fluid characteristics of absolute element and the automatic distribution characteristics of margin: Auto. The core code is as follows:

/* CSS code */
.box{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
Copy the code

The following information is displayed:

This method has good versatility, and needs to know the size of elements in advance, reducing dependence, and less maintenance changes in the late place, why not?

5. Conclusion

This is the end of absolute. Usually, we should think more and summarize more to get a new understanding. I plan to introduce relative positioning in my next article. The latest articles will be updated in my official account < front-end Talkking>, welcome to follow.

The above is the whole content of this article, thank you for reading, if there is an incorrect statement, welcome to leave a message correction!

6. Reference

  • Zhang Xinxu CSS World
** met, might as well pay attention to my wechat public account “front-end Talkking” **