In web design, the use of position attributes is very important. Sometimes, if we do not know this property clearly, it will bring us many unexpected difficulties.
positionThere are four different ways to locate attributes: static, fixed, relative, absolute and sticky. Finally, we will introduce the Z-index attribute closely related to the position attribute.
Part one: position: static
staticLocation is the default value of the HTML element, that is, no location, and the element appears in the normal stream.，Therefore, this positioning will not be affected by top, bottom, left and right.
For example, HTML code is as follows:
|
1
2
3
|
<div class="wrap"> <div class="content"></div></div> |
cssThe code is as follows:
|
1
2
|
.wrap{width: 300px;height: 300px; background: red;}.content{position: static; top:100px; width: 100px;height: 100px; background: blue;} |
The effect is as follows:
We found that although static and top were set up, the elements still appeared in the normal flow.
The second part: fixed positioning.
fixedLocation means that the element’s position relative to the browser window is fixed, and even if the window is scrolling it will not scroll, and fixed positioning makes the element’s position independent of the document flow, so it does not occupy space, and it will overlap with other elements.
htmlThe code is as follows:
|
1
|
<div class="content">I use fix to locate it!!! So I am not moving relative to the browser window. < /div> |
cssThe code is as follows:
|
1
2
|
body{height:1500px; background: green; font-size: 30px; color:white;}.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;} |
The effect is as follows:
That is, the div in the lower right corner will never move, just like a regular advertisement!!!
It is worth noting that fixed positioning needs to be described in IE7 and IE8. DOCTYPE can support.
The third part: relative positioning.
The relative positioning element is positioned relative to its own normal position.。
The key: how to understand its own coordinates?
Let’s take an example. Hmtl is as follows:
|
1
2
3
|
<h2>This is the headline < /h2> in normal position.<h2 class="pos_bottom">This heading moves down < relative to its normal position; /h2><h2 class="pos_right">The title moves to the right relative to its normal position; < /h2> |
cssThe code is as follows:
|
1
2
|
.pos_bottom{position:relative; bottom:-20px;}.pos_right{position:relative;left:50px;} |
The effect is as follows:
Bottom:-20px; downward movement. Left:50px; move to the right.
It can be understood as: after moving, it is the negative position before moving.
For example, in the example above, the bottom:-20px is negative before the move, that is, the bottom:20px before the move, that is, the bottom:20px before the move, and the downward 20px before the move.
For example: left: 50px; after moving is the left before moving – 50px; so after moving is the right before moving 50px.
That is, before moving, if the value is negative, it is directly changed into an integer; if the value is an integer, the relative direction is changed directly.
To figure out how relatives move, let’s see if there are other effects after moving.
htmlThe code is as follows:
|
1
2
3
|
<h2>This is a headline < with no location; /h2><h2 class="pos_top">The title is moved up < according to its normal position; /h2><p><b>Note: < /b> Even if the content of the relative location element is mobile, the reserved space elements are still stored in normal flow. < /p> |
cssThe code is as follows:
|
1
|
h2.pos_top{position:relative;top:-35px;} |
The effect is as follows:
According to the previous statement, top:-35px; the value is negative, then directly converted to a positive number, that is, after moving relative to move forward and upward deviation of 35px; we found that in the upper, after moving and the upper elements overlap; in the lower, even if the relative elements of the content moved, but the space reserved elements are stillKeeping it in normal flow, that is, after relative movement, does not affect other elements below.
Note: top: 20px; refers to the distance between the margin side of the child element and the border side of the wrapped element being 20px.
The fourth part: absolute positioning.
The absolutely positioned element is relative to the nearest positioned parent element, and if the element has no positioned parent element, its position is relative to & lt; HTML & gt;.
Here are some examples:
Example 1:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Absolute positioning < /title> <style> body{background:green;} .parent{ width: 500px;height: 500px;background: #ccc;} .son{ width: 300px;height: 300px;background: #aaa;} span{position: absolute; right: 30px; background: #888;} </style></head><body> <div class="parent"> <div class="son"> <span>What? < /span> </div> </div></body></html> |
The results are as follows:
That is, I only set position: absolute in the span; it doesn’t have any in its parent element, so its position is relative to html.
Example 2:
|
1
|
.son{position: relative; width: 100px;height: 100px;background: #aaa; } |
Compared to the previous example, I only modified the CSS of the element whose class is son to set position: relative; the effect is as follows:
So, we find that the position of the span is now relative to the parent element whose class is son with the position attribute.
Example 3:
|
1
|
.parent{position: absolute; width: 300px;height: 300px;background: #ccc;} |
I just modified this example.First exampleThe css– in the position:absolute is set up; the effect is as follows:
So we found that span is now positioned as the parent element relative to the class with the position: absolute attribute.
Example 4:
|
1
|
.parent{position:fixed; width: 300px;height: 300px;background: #ccc;} |
In contrast to example 1, I added the position attribute of fixed and found that the result is exactly the same as that in case 3.
Example 5:
|
1
|
.parent{position:static; width: 300px;height: 300px;background: #ccc;} |
Compared to Example 1, I added the position attribute of static (that is, the default attribute of html), and the result is the same as Example 1.
In summary, when the parent of an absolute positioning element has position: relative / absolute / fixed, the positioning element is positioned according to the parent element, and the parent element does not set the position attribute or sets the defaultAttribute, then the location attribute will be positioned according to the HTML element.
The fifth part: the overlapping element –z-index attribute.
First, it is stated that Z-index can only be valid on elements whose position attribute is relative or absolute or fixed.
The basic principles are:z-indexThe value of uuuuuuuuuuuuuuuuuuuuu
Let’s continue to understand this property through several examples.
Example 1:
That is, son1 and son2 are the two sub elements of parent. The results are as follows:
This is not the use of z-index, and we found that son2 is above son1, because son2 is behind son1 in html, so the latter overwrites the former. If we reverse the order of the two, we will find that blue (son1) is up.
Example 2:
Adding z-index:1 to son1 can be found as follows:
That is to say, the index value of son2 is less than 1.
What if we add z-index:1 to son2? The result is that yellow (son2) is on top. (because once the Z-index value is equal, the situation will not be equal to the index value).
Example 3:
Adding z-index:5 to son2 can be found as follows:
That is to say, son2 is on the top again. This is very simple, without much discussion.
Example 4:
Add z-index:10 to the parent element;
Add z-index: 5 to son1 and son2 so that theoretically the parent element is on top (yellow is covered with blue and yellow);
The results are as follows:
The result has not changed!!!!! This shows that the parent element and child element can not make the comparison of Z-index!!! But is that really true? Look at the next example:
Example 5:
Set the Z-index value of the two child elements to -5 at the same time; the parent element does not set the Z-index attribute. The results are as follows:
Success!! Note that there is a comparison between parent elements and child elements!!! It’s just that we need to set the Z-index value of the child element as negative.
Example 6:
Let’s add a z-index: 10 to the parent element on the basis of Example 5, and reasonably ~we should get the same result as Example 5!!
However…. It seems that we can’t set the Z-index value of the parent element, otherwise we won’t have the desired effect. Here is an interesting example.
Example 7:
We do not set the value of the parent element according to the experience of Example 6. Now we set the Z-index of son1 (blue) to 5 and the Z-index of son2 to – 5. Look at the following results:
That is, son1 is at the top, the parent element is in the middle, and son2 is at the bottom.
Is this the end of the exploration of Z-index? Of course not. Let’s take a look at the following more interesting examples.
Example 8:
The code is as follows:
The results are as follows:
Although parent1 and parent2 are the parent elements of son1 and son2 respectively, as we previously understood, the parent element cannot add Z-index values, otherwise it will cause errors. But here parent1 and parent2 are Zi Yuan compared to body.They are of the same class, so they can be compared. At this point, the child element son1 (blue) of parent1 is on the top.
Example 9:
If we set the Z-index value of parent2 to 20 on the basis of example 7, we will find the following results:
That is, parent2 will be on the same time as son2. This is the so-called “Spelling father”!!!
Similarly, on the basis of example 7, we do not set the index values of parent1 and parent2 and son2, but only set the Z-index value of son1 to 10. The effect is as follows:
That is, the blue son1 that was originally put up below, but not the parent1, ah, unfilial!!
Apparently, on the basis of Example 10, if we set the index value of son2 to be larger than that of son1, such as 20, then son2 will overwrite son1, and both are on the two parent elements!!
The effect is as follows:
Of course, if we set the Z-index of both sons to a negative bit such as – 5, then both of them will be overwritten by the parent element:
The sixth part: problems arising from the document flow.
We know that using position: absolute and position: fixed causes elements to detach from the document stream, which can lead to problems. Examples are as follows:
That is, child elements support the parent element.
But once the child element’s position is fixed or absolute, it will detach from the document stream, and the consequence is that the parent element cannot be pushed apart, as follows:
Solution 1: set the height of the parent element in JS is equal to the height of the child element.
Solution 2: set the height of the parent element forcibly. (forcibly set width for similar problems caused by width)
The seventh part: position: sticky;
This part is supplemented by 2017-3-13. I didn’t know this attribute before, and it was only a few days before I realized that this attribute was the way I used js a lot, that is, in one content, we can fix one part, then go to another content, and then fix another part.
You can also set the top value, which is the distance between the top edge of the border and the bottom edge of the wrapper element, but once you scroll up, it’s the distance from the top of the browser. Not much to say, just go up to demo and you’ll see.
