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 .

Layout rules

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 ：

1. Block level elements in the standard stream （block）

• Block level elements have one row exclusive , Arrange vertically from top to bottom ;
• The width and height of block level elements can be set ;
• Block level elements do not set the width of the case , The default width is its parent's 100%;

2. In line elements in a standard stream (inline)

• In line elements are arranged from left to right with other in line elements ;
• The width and height of in line elements cannot be set , Its width is determined by its content ;

3. Special in line elements

• input And img It's an in-line element , But you can set the width and height ;

4. Nested rules in standard flows

• Block level elements can nest inline elements , On the contrary, we can't
• ul（ Unordered list ）,ol（ Ordered list ） You can only nest li,li You can nest any element .
• dl（ Definition list ） You can only nest dt（ title ）,dd（ The title explains ） Elements .
• textarea Only text can be nested in ;
• p,h1~h6 Only text and inline elements can be nested ;
• select（ The form controls ） You can only nest option;
• a Tags cannot be nested with interactive tags ;

5. The problem of outer margin merging

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 ：

1. The parent element must be given a location attribute , It is generally recommended to use position:relative( namely ： Set the parent element to relative position );
2. Give child elements , Plus absolute positioning 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！