html Layout method in page layout (position) It is divided into relative layout (relative) And absolute layout (absolute)
position The five attribute values of ：
* static
* inherit
* fixed
* relative
* absolute
Let's introduce the function of each attribute value and its effect :
1.static
static Property is the default value , No positioning , The element appears in a normal stream （ ignore top, bottom, left, right perhaps z-index statement ）.
2.inherit
Specifies that inheritance should be from the parent element position The value of the property .
3.fixed
Generate absolutely positioned elements , Positioning relative to browser window . The position of the element is determined by "left", "top", "right" as well as "bottom" Attribute .
4.relative( Focus on the introduction )
Generate relative positioning elements , Relative to its normal position ( That is where it should be ) Positioning . therefore ,"left:20" The LEFT Location add 20 pixel .
*
Suppose a container has sub1 and sub2 Two components , When setting sub1 For position by relative after , Will be based on top,right,bottom,left The value of is offset by where it should be ,relative Of “ Relative ” That's what it means .
For this , Remember, you just need to ,sub1 If not set relative Where should it be , Once set, the offset is made according to the position it should be in .
And then there's the question ,sub2 Where's the location ? The answer is where it used to be , Where is it now , It's not located because sub1 Increased position The properties of the . If the sub2 Of position Also set to relative, What will happen ? At this time, it is still harmonious sub1 equally , Offset according to its original position .
5.absolute ( Focus on the introduction )
Generate absolutely positioned elements , be relative to static Locate the first parent element other than positioning . The position of the element is determined by "left", "top", "right" as well as
"bottom" Attribute .
Suppose a container has sub1 and sub2 Two components , When setting sub1 For position by absolute after :
*
When sub1 Parent object of ( Or great grandfather , As long as it is a parent object )parent It's also set position attribute , And position The property value of is absolute perhaps relative Time , in other words , Not the default value , here sub1 According to this parent To locate .
be careful , The object is determined , But there are some details that need your attention , That's what we do with parent Which location point is used for positioning ? If parent Yes margin,border,padding Etc , Then this anchor will be ignored padding, Will be from padding Where to start ( That is, only from padding From the top left corner of ) Positioning , That is to say, neglect padding, Of course not margin and border.
The next question is ,sub2 Where's the location ? Because when position Set to absolute after , Will lead to sub1 Overflow normal document flow , It's like it doesn't belong to
parent equally , It floats , stay DreamWeaver It is called “ layer ”, In fact, it means the same thing . here sub2 Will get sub1 Location of , Its document flow is no longer based on
sub1, But directly from parent start .
* If sub1 There is no one with position The parent object of the property , Then it will be body For positioning objects , Locate according to the browser window , This is easier to understand .
Technology