Shulou(Shulou.com)06/03 Report--

This article is about how to use the position attribute and the z-index attribute in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In web page design, the use of the position attribute is very important. Sometimes if we can not clearly understand this attribute, it will bring us a lot of unexpected difficulties.

There are four different positioning methods for position attributes, which are static, fixed, relative, and absolute. Finally, I will introduce the z-index attribute, which is closely related to the position attribute.

Part one: position: static

Static positioning is the default value of the HTML element, that is, there is no positioning, and the element appears in the normal flow, so this positioning is not affected by top,bottom,left,right.

For example, html code is as follows:

The css code is as follows:

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

The effect picture is as follows:

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

Part II: fixed positioning

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

The html code is as follows:

I use fix to locate! So I don't move relative to the browser window.

The css code is as follows:

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

The effect picture is as follows:

That is, the div in the lower right corner will never move, just like a pop-up advertisement!

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

Part III: relative positioning

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

The key: how to understand its own coordinates?

Let's look at such an example. The hmtl is as follows:

This is the title in the normal position, and the title moves down relative to its normal position, and the title moves to the right relative to its normal position.

The css code is as follows:

.pos _ bottom {position:relative; bottom:-20px;}. Pos_right {position:relative;left:50px;}

The effect picture is as follows:

That is, bottom:-20px;; moves down. Left:50px; moves to the right.

That is, it can be understood as: after moving is the negative position before moving.

For example, in the above example, the negative bottom:-20px; before moving means the bottom:20px; before moving, that is to say, the downward 20px before moving.

Another example: left:50px; after moving is-50px on the left before moving; that is to say, after moving, it is the 50px on the right before moving.

That is, after moving, before moving: if the value is negative, it will be changed to an integer directly; if the value is an integer, the relative direction will be changed directly.

After figuring out how the relative moves, let's take a look at whether the move will have any other effects.

The html code is as follows:

This is an unpositioned title that moves up according to its normal position.

Note: even if the contents of the relative positioning elements are mobile, the elements that reserve space are still saved in normal flow.

The css code is as follows:

H3.pos_top {position:relative;top:-35px;}

The effect picture is as follows:

According to the previous statement, if the top:-35px; value is negative, it will be directly replaced by a positive number, that is, the relative upward offset of 35px after moving and before moving; we find that on the top, after moving and the above elements overlap; in the lower, even if the content of the relative elements moves, the elements that reserve space are still saved in the normal flow, that is, after the relative movement, it will not affect the other elements below.

Part IV: absolute positioning

The absolutely positioned element is relative to the nearest positioned parent element, and if the element does not have a positioned parent element, its position is relative to.

Here are a few examples:

Example 1:

Absolute positioning of body {background:green;} .parent {width: 500pxposition height: 500pxposition background: # ccc;} .son {width: 300pxposition height: 300px position background: # aaa;} span {position: absolute; right: 30px; background: # 888;} what?

The effect is as follows:

That is, I only set position:absolute; in span but not in its parent element, so its position is relative to html.

Example 2:

.son {position: relative; width: 100pxposition height: 100pxposition background: # aaa;}

Compared to the previous example, I only modified the css of the element whose class is son and set it to position:relative; as follows:

As a result, we find that the position of the span is now the parent element of the son relative to the class with the position attribute.

Example 3:

.parent {position: absolute; width: 300pxscape height: 300pxpolitical background: # ccc;}

For this example, I just modified the css-- in the first example to set the position:absolute; effect as follows:

So we found that the span is now positioned as the parent element of the parent relative to the class with the attribute of position:absolute.

Example 4:

.parent {position:fixed; width: 300pxposition height: 300pxposition background: # ccc;}

Compared to example 1, I added the position attribute of fixed and found that the result was exactly the same as that of example 3.

Example 5:

.parent {position:static; width: 300pxposition height: 300pxposition background: # ccc;}

Compared to example 1, I added the position attribute of static (that is, the default property of html), and the result is the same as example 1.

To sum up, when the parent element of an absolute positioning element has position:relative/absolute/fixed, the positioning element is located based on the parent element, and the parent element does not set the position attribute or sets the default attribute, then the positioning attribute is located according to the html element.

Part V: overlapping elements-- z-index attributes

First of all, declare that z-index can only be valid on elements whose position attribute value is relative or absolute or fixed.

The basic principle is that the value of z-index controls the stacking order (stack order) of positioning elements perpendicular to the direction of the display screen (z-axis). When elements with high values overlap, they will be on top of elements with low values.

Let's continue to understand this attribute through a few examples.

Example 1:

That is, son1 and son2 are two child elements of parent. The effect is as follows:

This is not using z-index, we find that son2 is above son1, this is because son2 ranks after son1 in html, so the latter overwrites the former, and if we reverse the order of the following two, we will find that son1 is on.

Example 2:

You can find the following effect when you add zMurray index 1 to son1:

In other words, the index value of son2 is less than 1.

What if we also add son2 index 1;? It turns out that yellow (son2) is on it. (because once the z-index value is equal, the situation is the same as not setting the index value at all)

Example 3:

You can find the following effect when you add zMurray index 5 to son2:

That is, son2 is on it again, which is very simple and will not be discussed too much.

Example 4:

Add z-index:10 to the parent element

Add zindexV5 to son1 and son2; in theory, the parent element will be on it (yellow covers blue and yellow)

The results are as follows:

The result hasn't changed! This means that parent and child elements cannot be compared to z-index! But is that really the case? Take a look at the next example:

Example 5:

Set the z-index value of both child elements to-5 at the same time; the parent element does not set the z-index attribute. The results are as follows:

Success! It shows that a comparison can be made between parent elements and child elements! We just need to set the z-index value of the child element to a negative number.

Example 6:

We add a z-index:10 to the parent element on the basis of example 5, and we should be able to 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 effect we want. Let's look at another interesting example!

Example 7:

Based on the experience of example 6, we do not set the value of the parent element. Now set the z-index of son1 (blue) to 5 and the z-index of son2 to-5. See the following result:

That is, son1 is at the top, 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 some more interesting examples.

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, according to our previous understanding, the parent element cannot add a z-index value, otherwise it will result in an error. But here parent1 and parent2 are child elements relative to body, and they are of the same level, so you can compare them. And now the child element son1 (blue) of parent1 is on the top.

Example 9:

If we set the z-index value of parent2 to 20 based on example 7, we will find the following effect:

That is, while parent2 is on, son2 will be on at the same time. This is the so-called "fighting father"!

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 to say, the blue son1 originally below was brought up, but not the parent element (parent1), ah, not filial piety!

Example 11. Obviously, 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 override son1 and only on the two parent elements!

The effect is as follows:

Example 12. Of course, if we set the z-index of both son to a negative bit such as-5, then both will be overridden by the parent element:

Thank you for reading! On "css position attributes and how to use z-index attributes" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.