The Position property of CSS and the Z-index property and graphic explanation

This time to bring you the CSS position properties and Z-index attributes of the text, the use of position attributes and Z-index attributes of the note, the following is the actual case, a look.

In web design, the use of position attributes is very important. Sometimes it will bring us many unexpected difficulties if we do not know this property clearly.

There are four different positioning methods for position properties, namely static, fixed, relative, absolute. Finally, the Z-index property that is closely related to the Position property is introduced.

The first part: Position:static

Static positioning is the default value of the HTML element, that is, there is no location, and the element appears in a normal stream, so this positioning does not receive the top,bottom,left,right effect.

such as the HTML code is as follows:

<p class= "wrap" >    <p class= "content" ></p></p>

The CSS code is as follows:

. wrap{width:300px;height:300px; background:red;}. content{position:static; top:100px; width:100px;height:100px; background:blue;}

As follows:

We found that although static and top are set, the elements still appear in the normal flow.

Part II: Fixed positioning

Fixed positioning refers to the position of the element relative to the browser window is a fixed position, even if the window is scrolled it will not scroll, and fixed positioning so that the position of the element is independent of the document flow, so does not occupy space, and it will overlap with other elements.

The HTML code is as follows:

<p class= "Content" > I am using fix to locate!!! So I'm not moving relative to the browser window. </p>

The CSS code is as follows:

body{height:1500px; background:green; font-size:30px; color:white;}. content{position:fixed; right:0;bottom:0; width:300px;height:300px; background:blue;}

As follows:

That is, the lower right corner of the p will never move, like often pop out of the ads!!!

It is worth noting that the fixed positioning needs to be described under IE7 and IE8! DOCTYPE to support it.

Part III: relative positioning

The positioning of the relative positioning element is relative to its own normal position.

The key: How to understand its own coordinates?

Let's look at an example of HMTL as follows:

The CSS code is as follows:

. pos_bottom{position:relative; bottom:-20px;}. pos_right{position:relative;left:50px;}
As follows:


i.e. bottom:-20px; Move down. left:50px; move to the right.

This can be understood as: the position of the negative before moving.

For example, in the above example, the mobile is the bottom:-20px before moving, that is, the moving is before the movement of the bottom:20px, that is, after the move is the downward 20px before moving;

Another example: left:50px; move is the left -50px before moving, so that is the right 50px before moving.

That is: After moving for the before move: if the value is negative, then directly into an integer, if the value is an integer, the relative direction is changed directly.

Figuring out how the relative moves, let's see if there are any other effects after the move.

The HTML code is as follows:


The CSS code is as follows:

h2.pos_top{position:relative;top:-35px;}
As follows:


According to the previous statement, top:-35px, the value is negative, then directly into a positive number, that is, after the move relative to the moving forward offset 35px; We found that, after the move and the above elements overlap, even if the relative elements of the content moved, but the elements of the reserved space is still stored in normal flow, That is, the other elements below are not affected by the relative movement.

Part IV: Absolute positioning

An 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 
Here are a few examples:

Example 1:

<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><p class= "Parent" >    <p class= "Son" >        <span> what? </span>    </p></p>
The effect is as follows:


That is, I only set the Position:absolute in span, and none in its parent element, so its position is relative to the HTML.

Example 2:

. son{position:relative; Width:100px;height:100px;background: #aaa;}
Compared to the previous example, I only modified the CSS of the element class to son, set it to Position:relative, as follows:


Thus, we find that the position of span is now relative to the parent element of son with the position attribute.

Example 3:

. Parent{position:absolute; Width:300px;height:300px;background: #ccc;}
This example I just modified the first example of the css--set the Position:absolute, the effect is as follows:


So we found that span is now positioned relative to the parent element of the class with the Position:absolute property.

Example 4:

. parent{position:fixed; Width:300px;height:300px;background: #ccc;}
With respect to example 1, I added the fixed position property and found that the result is identical to Example 3.

Example 5:

. parent{position:static; Width:300px;height:300px;background: #ccc;}
In contrast to Example 1, I added the static position property (the default property of HTML), and the result is the same as Example 1.

In summary, when the parent element of a absolute anchor element has position:relative/absolute/fixed, the anchor element is positioned according to the parent element, and the parent element does not have the Position property set or the default property set. The positional properties are then positioned according to the HTML element.

Part V: Overlapping elements--z-index Properties

Declare first: Z-index can only be valid on elements with a position property value of relative or absolute or fixed.

The rationale is that the value of the Z-index controls the stacking order (stack order) of the positioned elements on the vertical side of the display screen orientation (the z-axis), where elements with large values overlap with small values.

Let's continue with a few examples to understand this property.

Example 1:


That is, Son1 and Son2 are the two child elements of the parent, as follows:


This is not using Z-index, we found Son2 on the Son1, this is because son2 in the HTML after the Son1, so the latter will cover the former, if we reverse the order of the following two, we will find that the blue (Son1) on the.

Example 2:

Add Z-index:1 to the Son1, and you can see the effect as follows:


This means that the index value of Son2 is less than 1.

What if we add z-index:1 to Son2? The result is yellow (son2) on top. (because once the z-index values are equal, the situation is the same as not setting the index value)

Example 3:

Add Z-index:5 to the Son2, and you can see the effect as follows:


That is, yellow (Son2) is on the top again, this is very simple, not too much discussion.

Example 4:

Add z-index:10 to parent element;

Add Z-index:5 to Son1 and Son2; In this case, the parent element will be on top (yellow is covered with blue and yellow);

The results are as follows:


The result has not changed!!!!! This means that the parent element and the child element cannot do Z-index comparison!!! But is that really the case? Take a look at the next example:

Example 5:

Set the Z-index value of the two child elements to 5 at the same time, and the parent element does not set the Z-index property. The results are as follows:


Success!! The description can be compared between the parent element and the child element!!! Just need us to set the Z-index value of the handle element to a negative number.

Example 6:

We add a z-index:10 to the parent element on the basis of example 5, and it should be possible to get the same results as in Example 5!!


However.... It seems that we cannot set the Z-index value of the parent element, otherwise we will not have the effect we want. Let's look at an interesting example below!

Example 7:

We do not set the value of the parent element according to the experience of example 6, now set Son1 (blue) Z-index to 5,son2 Z-index to 5, see the following result:


That is, son1 on top, parent element in the middle, son2 at the bottom.

Is this the end of the quest for Z-index? Of course not, let's look at some of the more interesting examples below.

Example 8:

The code is as follows:


The effect is as follows:


Although Parent1 and Parent2 are the parent elements of Son1 and Son2 respectively, as we have previously understood, the parent element is not allowed to add the Z-index value, otherwise it will result in an error. But here parent1 and parent2 relative to the body is the child element, they are similar, so it can be compared. and the child element of the parent1 is Son1 (blue) on.

Example 9:

If we set the Z-index value of Parent2 to 20 on the basis of example 7, we will find the following effect:


That is, Parent2 on the same time Son2 will be on the same time. This is the so-called "Fight Dad"!!

Example 10. Also on the basis of example 7, we do not set the index value of Parent1 and Parent2 and Son2, but only set the Z-index value of Son1 to 10, the effect is as follows:


That is originally in the following Blue Son1 was brought up, and did not put the parent element (PARENT1) on the, eh, not filial AH!!

Example 11. Obviously, on the basis of example 10, if we set the index value of son2 larger than Son1, such as 20, then Son2 will overwrite Son1, and all in two parent element only!!

Effects such as:


Example 12. Of course, if we set the two son's z-index to a negative number such as-5, then both will be overwritten by the parent element:


Part VI: summary

This part of the knowledge is very interesting, I hope you can continue to explore, of course, if through this blog to give you a little help that would be better!

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Summary of common color gradient methods

How to get rid of CSS3 's blur white side

The method of horizontal vertical centering of three absolutely positioned elements