Detailed explanation of the CSS position attribute and cssposition

Detailed explanation of the CSS position attribute and cssposition

Position is a very important attribute in CSS. Through the position attribute, we can offset an element relative to its normal position, parent element or browser window. Postion is also an attribute that beginners are easy to understand. This article will start with the basic knowledge and talk about some theories and applications about positon attributes.

Basic knowledge

The postion attribute is positioning. It has four different types of positioning, which will affect the generation method of elements. The position attribute is described in detail below.

Position four types

(1) static
Static is the default value of the position attribute. By default, block-level elements and intra-row elements are displayed according to their own characteristics.
(2) relative
After this attribute is set, the elements are offset based on top, left, bottom, and right. The key point is that the original space is still reserved. Let's look at the following example:
HTML code

1 <div class="relative">2 </div>3 <div></div>

CSS code

1 div { background: #0094ff; width: 250px; height: 100px; }2         .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }

Relative Effect

In this example, div. relative is relatively positioned, left is set to 20px, left is set to 50px, It is offset relative to the parent element, and the original space also occupies, the following elements are not replaced.

(3) absolute
After the element is set to absolute, it will be out of the Document Stream and does not occupy the original space. The following elements will be replaced, whether in-row or block-level elements, A block-level box is generated. For example, you can set the height and width attributes after setting absolute for the Row Element span. Take the following example:
HTML code

1 <span class="absolute">2 </span>3 <div></div>

CSS code

1 div { background: #0094ff; width: 250px; height: 100px; }2         .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }

Absolute Effect

If the span tag is set to absolute positioning, you can set the height and width attributes without occupying the original space. The following div elements will be replaced.

(4) fixed
Fixed is similar to absolute, but it is offset from uncertain parent element compared to absolute. fixed is offset from browser window.

Contained block

In details about the CSS float attribute, we mentioned the concept of block. The position attribute also contains the block attribute. It should be discussed in several situations:
1. Contains blocks of the root element. The root element is generally an html element. Some browsers use the body as the root element. Most browsers initially contain a rectangle of the window size.
2. Contains blocks of non-root elements. If the position of the element is relative or static, its contained blocks are the nearest block-level boxes, and the content boundary of the cells in the table or blocks in the row.
For example,
HTML code

1 <div> 2 I am the content of the parent element 3 <div class = "relative"> 4 relative positioning element 5 </div> 6 </div>

CSS code

div { background: #0094ff; width: 250px; height: 100px; }.relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }

Contained block

This is the inclusion block of the relative positioning element. It is the content boundary of the last block-level box, the cell of the table or the block in the row. The relative positioning element is offset against the contained block, we can simply consider it as an offset relative to its original position.

3. Contains blocks of non-root elements. If the position of the element is absolute, the block contains the closest position rather than the static ancestor element.
Simply put, its contained block will be searched up from the parent element until the first position is not static.

Offset Property

The offset attribute has been involved in the previous example. It refers to the offset between an element and its contained block. We call it the offset attribute, which is top, bottom, left, right, represent the top, bottom, and left. Their values can be specific values or percentages. If it is a percentage, top and bottom are the percentages relative to the height of the contained block, and left and right are the percentages relative to the width. They can also be set to a negative value, that is, they may move the element outside the contained block.

Absolute Positioning

Next, let's take a look at the details of absolute positioning.

Basic absolute positioning

When an element is set to absolute positioning, It is detached from the document stream and then offset against its contained block.
In general, we will set an element as relative as the inclusion block of the absolute element. Let's look at the example below:
HTML code

1 <div class = "absolute"> 2 positioning 3 </div> 4 <br/> 5 <br/> 6 <br/> 7 <br/> 8 <br/> 9 <br/> 10 <div class = "relative"> 11 <div class = "absolute"> 12 positioning 13 relative to the last relative ancestor element </div> 14 </div>

CSS code

1 div { background: #0094ff; width: 250px; height: 100px; }2         .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }3         .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }

Basic absolute positioning

There are two absolute positioning elements. The first element has no position and is not a static ancestor element. Therefore, its contained block is the body, which is offset according to the body,
The second absolute positioning element sets a relative parent element, which is offset based on the parent element.

Absolute locating of overlapping issues

When the element is set to absolute positioning, it will be out of the Document Stream and the occupied space will be lost. If the offset is close, it will cause overlap. Take a look at the following example:
HTML code

1 <div class = "relative"> 2 <div class = "absolute"> 3 positioning 14 </div> 5 <div class = "absolute light"> 6 positioning 27 relative to the last relative ancestor element </div> 8 </div>

CSS code

1 div { background: #0094ff; width: 250px; height: 100px; }2 .relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; }3 .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }4 .light { background: #f3d6d6; top: 70px; left: 80px; }

Absolute locating of overlapping issues

We can see that the second absolute positioning element covers the first element. How can we make the first element cover the second element? This requires the z-index attribute, this attribute indicates the superposition order of elements. By default, the z-index value is 0. The higher the value, the higher the element level. This can cover elements lower than its level, set the first primary color z-index to 10. The result is as follows:

Absolute locating of overlapping issues

If the two elements have the same hierarchy, the elements that follow the same hierarchy will overwrite the previous element. By default, the second element will cover the first element.

Fixed Positioning

Fixed positioning is very simple, similar to absoulte, but its inclusion block is a browser window, which is much simpler. Common applications, such as fixed navigation, return to the top. We will not go into details here. You can find relevant information.

Relative positioning

After the element positioned by relative is offset, it will not be separated from the document stream and occupy the original space. In addition, we should also pay attention to the following details: If the elements overlap when the margin value is set to a negative value, the relative positioning element will overwrite the normal element. Let's take a look at the following example:
HTML code

1 <div class = "no-relative"> 2 unpositioned elements 3 </div> 4 <div class = "minus-margin"> 5 negative margin elements 6 </ div>

CSS code

1 div { background: #0094ff; width: 250px; height: 100px; }2 .no-relative { background: #ff6a00; width: 200px; height: 100px; }3 .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; }4 .minus-margin { margin-top: -30px; }

Not overwritten when relative positioning is not performed

By default, both elements are normal elements. After the negative margin attribute is set, the following elements overwrite the previous elements. We modify the class of the first element as relative, you can see the following results:

Overwrite relative positioning

After relative positioning is added, the first element will overwrite other normal elements.

The most common application of the relative attribute should be the inclusion block of the absolute element. to limit the offset position of the absolute element, the parent element is often set as the relative element to be used as the inclusion block.

Application Example

Position is frequently used. I will introduce some common scenarios as follows:

Product tags

On e-commerce websites, we often see tags such as "New Products", "promotions", and "Hot selling" in the upper left or upper right corner of the product, such:

Product tags

How is this implemented? Let's simulate it:
HTML code:

1 <div class = "product"> 2 I am a product 3 <span class = "hot"> 4 selling 5 </span> 6 </div>

CSS code:

1 .product { width: 150px; height: 150px; background: #0094ff; position: relative; }2    .hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; }

The effect is as follows:

Product tags

, There is a label in the upper right corner. The principle is very simple. It is to set relative positioning of the parent element, absolute positioning of the tag element, and offset from the parent element to the upper right corner.

Automatic completion box

The Automatic completion box is a very common application. The position attribute is also used in the generated drop-down menu. Let's take a look at the following results:

Automatic completion input box

This is a simple and common Automatic completion box. Let's take a look at its HTML and CSS code:
HTML code

1 <input class = "search-box" type = "text" placeholder = "Enter the keyword" value = "position"/> 2 <ul style = "left: 58px; "> 3 <li> position attribute </li> 4 <li> position application </li> 5 <li> what is position </li> 6 <li> position translation </li> /li> 7 </ul>

CSS code

1 .search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; }2 ul, li { list-style-type: none; }3 ul { border: 1px solid #ccc; width: 210px; position: absolute; }4 li { padding: 5px; }

This principle is also very simple. You can set the drop-down menu to absolute positioning, and then set its left attribute to align with the input box.

Of course, there are still a lot of position applications, such as la s, such as fixed, which can be used for fixed navigation menus and fixed menus in the lower right corner of the webpage. If you are interested, you can find relevant materials for learning.

Summary

The position attribute is an attribute that is easy for beginners to confuse, especially the application of absolute and relative. To make good use of them, we must first understand the basic features of absolute and relative. After understanding their features, we can easily apply them. After understanding the basic principles, write a few examples to understand their features in practice, and you will be familiar with them.

Address: http://luopq.com/2015/11/15/css-position/