stay 《Vue Advanced ( One four two ):CSS- Static positioning , Relative positioning , Absolute positioning , The usage and difference of fixed positioning are explained in detail 》 In the article , Explained CSS Several common positioning methods . This blog post explains how to use absolute positioning to achieve perfect layout , And application precautions .
In the process of layout, we often use absolute positioning , Many beginners in the beginning with absolute positioning often can not achieve the desired effect , Because they tend to ignore the two conditions that use absolute positioning .
what ? Using absolute positioning requires conditions ?
Of course ! There's no code in the brain , I can't think for myself where I should be . For the convenience of use , When using absolute positioning, two conditions should be satisfied .
Before I talk about these two conditions , Let's start with a concept —— Standard flow .
What is standard flow ?
Standard flow (normal flow), Also known as document flow , Without the aid of any special css The arrangement of regular elements .
Floating and positioning (absolute,fixed) It will break away from the standard flow , That is, not subject to this set of rules .
Standard flow is actually a default layout rule . Here are some of the layout rules of standard flow elements :
Of two adjacent elements in a standard stream margin-bottom And margin-top There will be overlap .
Look at some of the layout rules above , Do you know what standard flow is ?
for instance , take float Come on , A box without a float is a standard flow , And the floating box is a nonstandard flow , because float Changed its default layout rules .
And what we're going to use Absolute positioning , It's for the nearest nonstandard flow box . ( Floating on a box , Relative positioning , Or absolute positioning , Then this box becomes a non-standard flow box )
Okay , Then it's time to use the two conditions that absolute positioning must satisfy .
When we're going to use absolute positioning , There must be two conditions :
position:relative
( namely : Set the parent element to relative position );position:absolute
( Set the child element to absolute position ); At the same time add direction attribute (top ,left,rigth,bottom) Why should these two conditions be satisfied ?
Because absolute positioning is based on the parent element , Positioning . If he doesn't have a parent element , Or its parent element is not set position:relative Property, it will be based on the nearest nonstandard flow box as the reference point .
Absolute positioning takes the current element out of the document stream , It becomes a nonstandard flow . What does that mean ?
Actually , When it's standard flow , It's in place by default , When it's out of standard flow , He just floated , No longer occupy the original position .
If you want to position , If you don't set its parent to relative positioning ( Let the parent element become a nonstandard stream ), Or it has no parent element , Then it will be positioned on the top of the node , Take him as the benchmark .
If we meet these two conditions , It will be based on the parent element for absolute positioning .
In this way , It will save you a lot of trouble .
Let's take a look at specific examples :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Novice tutorial (runoob.com)</title>
<style>
h3
{
position:absolute;
left:50px;
top:50px;
color:#FFF;
}
.div_test{
width:500px;
height:200px;
background-color:#000;
}
.div_test2{
width:300px;
height:100px;
float:right;
background-color:blue;
//position:relative;// Relative positioning
}
</style>
</head>
<body>
<div class="div_test">
<div class="div_test2">
<h3> This is an absolute title </h3>
</div>
</div>
</body>
</html>
The code above defines a big div, It contains a little div, Small div There's a paragraph that uses absolute positioning . According to our code , We want this passage to be based on div_test2 To locate , But run it , Pictured :
We can see , The text is positioned according to the top of the node . This is because its parent element does not set relative positioning .
Now set the relative positioning of its parent element .
The operation results are as follows :
Biu~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~pia!