Position: Absolute position:absolute Position :absolute Position :absolute Position :absolute Position :absolute Position :absolute position:absolute position:absolute position:absolute position:absolute In practical scenario, however, because of the absolute positioning “destructive” is usually better than float, so someone will feel absolutely positioned elements play with ordinary fluid elements completely seemed to be no to go, in fact, in addition to the well-known needs depends on the orientation of recent ancestor nodes, absolute positioning elements and there are many “no from the characteristics of the document flow”, This is explored in depth in this chapter, “Absolute positioning without dependence.” After understanding some basic information about absolute positioning, let’s explore the unfathomable absolute positioning below!
1. Contain block of absolute
In the world of CSS, element size and position calculation has been to the influence of the containing block, without containing block, then the elements of information would like TXT text, all shows in a row, this is obviously not conform to the standard of our reading, normally we hope can text information in the case of some common sense word wrap, since can break, You have to have the concept of a containment block, and as you know, the containment block of an ordinary element is usually its parent, so if you set the width of an element to 100%, you’re calculating the width relative to the width of the parent container, The inclusion block of an absolutely positioned element is computed relative to the ancestor element whose position is not static. Due to the importance of inclusion blocks in the CSS world, the CSS specification has clear calculation rules as follows:
(1) The root element (usually HTML) is called the initial contain block and is the size of the browser window.
(2) For position:relative/static (the default) elements, the containing block is formed by the Content-box boundary of their nearest block container ancestor box.
(3) For the element position:fixed, its containing block refers to the initial containing block.
(4) For position:absolute elements, the containing block is created by the padding-box of the ancestor element whose nearest position is not static (if the ancestor element is a block element). A containment block is the initial containment block if no one matches the condition.
The above four words look ordinary, actually hidden mystery. For pure inline elements, position:relative and static are ignored. Therefore, the containing block of a position:relative and static element is not necessarily its parent. Let’s look at an example to reinforce the impression.
<! -- Normal elements contain blocks -->
<div>
<span>How are you</span>
<span style="max-width: 200px;">I'm fine. I have a child element<div style="width: 50%">I'm a child, and I want to see who the contain block is</div>
</span>
</div>
Copy the code
Once again, theory and practice are aligned. In the above example, the child div is the outermost div as its own contained block, ignoring its parent SPAN inline tag.
Compared with conventional elements, absolute elements have two obvious characteristics:
(1) The element containing the block is not a parent block element, but the nearest position is not a static ancestor or root element.
(2) The boundary is padding-box instead of Content-box.
In fact, in addition to the above two obvious features, there is a bigger difference between absolute elements and normal elements. Pure inline elements can also be used as absolute elements containing blocks. However, the rules are relatively complex and different browsers have different rules, so I will not discuss them here. Fortunately, when we use absolute positioning, we mostly use blocks for layout, which can’t be played with the graphic-oriented inline elements themselves, so we can reasonably not explore this feature.
Height :100% and height:inherit () :inherit () :inherit () :inherit () :inherit ()) The latter simply inherits the height of the parent element and is useful in some scenarios.
Now that we have a “complete” understanding of how a “contain block” of absolutely positioned elements is generated, we need to run a little test to verify its usefulness.
<! -- Hover mouse to display text effect -->
<div class="icon"></div>
<style>
.icon{
position: relative;
width: 16px;
height: 16px;
background: url('.. /pic_title_left.png') center;
}
/* To show more clearing without mouse-over events */
.icon::after{
content: 'icon';
position: absolute;
top: 100%;
background: rgba(0.0.0.0.8);
color: white;
}
</style>
Copy the code
In this example, we want to implement a mouse-over icon to display a message. You can see that the width of the absolute position element is limited to 16px of the parent container, and the active wrapping of the text becomes an ugly effect. This is the “wrapping” of the absolute position element. So the “wrapping” of an absolutely positioned element depends on the “containing block”. Fixing the problem is as simple as changing the default width type, adding white-space: Nowrap, and changing the width from “wrapping” to “maximum available width” to achieve the desired effect.
The padding-box boundary for position:absolute is similar to the padding-box boundary for overflow hiding. It depends on the actual development scenario. For example, when we are developing a text column, we need some white space on both sides, and we usually use padding instead of margin, because margin is completely transparent, so there will be some trouble in setting the background color. Of course, we will not consider border padding. Because we really think of a border as a border. In this case, we need to fix an icon in the upper right corner, such as the “blog Expert” icon, where do you want this icon? Or what is the concept of the upper right corner? CSS makes the trade-off for us. CSS says it should be on the outer edge of the padding-box, not the Content-box, and it actually looks better that way, as shown below
<! -- effect of icon fixed in upper right corner -->
<div class="content">
<span>Let's say I'm an icon</span>I have a lot of content here, but I need to have a padding, I also want to put a icon in the top right I have a lot of content here, but I need to have a padding, I also want to put a icon in the top right I have a lot of content here, but I need to have a padding, I also want to put a icon in the top right I have a lot of content here, but I need to have a padding, I also want to put a icon in the top right I have a lot of content here, but I need to have a padding, I also want to put a icon in the top right I have a lot of content here, but I need to have a padding, I also want to put a icon in the top right I have a lot of content here, but I need to have a padding, I also want to put a icon in the top right I have a lot of content here, But I'm going to have an inside margin, and I'm going to put an icon in the upper right corner because I have a lot of content here, but I'm going to have an inside margin, and I'm going to put an icon in the upper right corner</div>
<style>
.content{
position: relative;
width: 400px;
padding: 20px;
border:2px solid #ccc;
border-radius: 4px;
}
.content span{
position: absolute;
right: 0;
top: 0;
line-height: 20px;
width: 70px;
height: 40px;
background: yellow;
}
</style>
Copy the codeSince the Markdown editor supports markup language, we can preview the final look directly as follows (hint: you can check the following elements directly in your browser to see the CSS style)
If you want the top right definition to be content, then CSS gives you a little bit of leeway. Don’t use right: padding-right, top: Padding-top, which would be silly, also increases the coupling between the top right corner and the padding. You can do this by using border padding instead of using the padding.
2. Independent absolute positioning with relative characteristics
This is probably the biggest case in CSS history. It is even worse than clear float. After all, clear float is “clear float”. Absolute is considered to be positioned in the upper left corner of the containing block by default. We can verify this with a simple example: where would an absolutely positioned element be without left/r/t/b?
<div style="position: relative; background:yellow">I'm the contain block<div style="position: absolute;">I am the absolute location element</div>
</div>
Copy the codeMany people would think that the absolute positioning element would be displayed alongside the text in the contained block. In fact, the test result is shown below. Since the Markdown editor supports the tag-language, we can preview the final result directly as follows (hint: you can check the following elements directly in the browser to see the CSS style)
The height of the parent div does not contain the height of the absolutely positioned element. The height of the parent div does not contain the height of the absolutely positioned element. The author calls this kind of absolute positioning without setting the left/right/top/bottom attribute value as “independent absolute positioning”. This absolute positioning attribute has two significant characteristics: 1. Destructiveness, 2. relativity. Absolute positioning without dependence can be regarded as relative positioning in essence, but it does not occupy the size flow of CSS, that is, it retains a certain “relativity” on the basis of maintaining destructiveness. It sounds like there’s a way to calculate position relative to position and then pull yourself out of the document stream. This location-free relative positioning feature can actually be very useful in real development. To reinforce this concept, let’s give a few examples.
1) We need to implement an image with a small icon in the upper left corner. In this case, we only need to use one style, without the extra left and top declaration.
<! -- Image positioned in upper left corner -->
<img src="top1.png" style="position:absolute"><img src="1.jpg">
Copy the code
2) We need to realize some characters with symbols. Vertical-align also has the properties of upper and lower indices. However, since the inline elements will occupy positions, which will affect the centering display of elements, we usually use the feature that absolute positioning does not occupy positions to achieve the effect shown in the following figure.
<! -- Position text in upper right corner -->
<div class="container">
<div class="li">
<div class="word">Common navigation</div>
</div>
<div class="li">
<div class="word">Top navigation<span class="icon">hot</span>
</div>
</div>
<div class="li">
<div class="word">The new navigation<span class="icon">new</span>
</div>
</div>
</div>
<style>
.container{
margin: auto;
background: #ccc;
}
.li{
display: inline-block;
width: 200px;
text-align: center;
}
.word{
padding: 20px;
}
.icon{
position: absolute;
color: red;
margin: -6px 0 0 4px;
font-size: 12px;
}
</style>
Copy the codehot
new
3) The last example is a more commonly used login and registration prompt function.
<! -- Login registration prompt -->
<div class="container">
<div class="line">
<label>The user name</label>
<div>
<input type="text" placeholder="Please enter user name">
<i>* The user name is abnormal</i>
</div>
</div>
<div class="line">
<label>password</label>
<div>
<input type="text" placeholder="Please enter your password">
<i>* Passwords are not supported</i>
</div>
</div>
<div class="line">
<label>Mobile phone no.</label>
<div>
<input type="text" placeholder="Please enter your mobile phone number.">
</div>
</div>
</div>
<style type="text/css">
.container{
width: 400px;
margin: auto;
}
.line{
margin:20px 0;
}
.line label{
font-size: 18px;
line-height: 40px;
float: left;
}
.line div{
margin-left: 4em;
}
.line input{
width: 320px;
font-size: 18px;
padding: 9px 5px;
border: 1px solid #d0d6d9;
vertical-align: top;
}
.line i{
position: absolute;
line-height: 40px;
margin-left: 20px;
color:red;
}
</style>
Copy the code
In addition to the above effects, dependency free absolute positioning can also help us to implement dropdown boxes, simulate placeholders, etc., here is not too much to describe, three examples are also to help you understand the use of dependency free absolute positioning scenarios.
Finally, let’s focus on the “block-like” independent absolute positioning. Generally speaking, block-like means that the computed value of display is blocky, that is, position:absolute is declared, which is equivalent to display:block, but the position of the element is related to the attribute of the element itself. It sounds a little convoluted, but let’s look at an example and see how it compares.
<! Deep understanding of dependency free positioning -->
<div style="position: relative; background: yellow">I'm the contain block<span style="position: absolute;">I am the absolute location element</span>
</div>
<div style="position: relative; background: yellow">I'm the contain block<div style="position: absolute;">I am the absolute location element</div>
</div>
Copy the codeSince the Markdown editor supports markup language, we can preview the final look directly as follows (hint: you can check the following elements directly in your browser to see the CSS style)
I am the absolute location element
In this example, before position:absolute is declared, one element is block-level and one is inline, so one element is displayed in line wrap and the other is displayed in line. After absolute is declared, the computed values become blocks, but their positions are still the same as before.
In this chapter we have looked into the absolute positioning containment block and the “absolute positioning without dependency” nature. In the next chapter we will talk about the fluid nature of Absolute and the love-hate relationship between Absolute and other CSS.
Never forget why you started, and your mission can be accomplished.
You can also scan the QR code to enter the blogger’s fan group (708637831). Of course, you can also scan the QR code to reward and directly keep a handsome blogger.
