What is the CSS position property for?

Position is a very important property in CSS, and with the Position property, we can offset the element relative to its normal position, the parent element, or the browser window. Postion is also a property that beginners can not understand the situation, this article will start from the most basic knowledge, talk about the positon properties of some theories and applications.

Basic knowledge

The Postion property becomes a positioning, it has 4 different types of positioning, these types will affect how the elements are generated, and below we detail the position property.

Four types of position

(1) static
Static is the default value for the Position property, and by default, block-level elements and inline elements are displayed according to their respective characteristics
(2) Relative
Relative translated into Chinese called relative positioning, after setting this property, the element will be offset according to Top,left,bottom,right, the key point is that its original space is still retained. Let's look at the following example:
HTML code

<div class= "Relative" ></div><div></div>

CSS Code

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

Relative effect

In this example, p.relative is relatively positioned, and left is set to 20px,left to 50px, which is offset from the parent element, and the original space is occupied, and the following elements are not replaced.

(3) Absolute
When the element is set to absolute, it is detached from the document stream and does not occupy the original space, and the subsequent elements are replaced, and regardless of whether the element is an inline or block-level element, a block-level box is generated. That is, for example, when the inline element span is set to absolute, you can set the height and width properties. Look at the following example:
HTML code

<span class= "Absolute" ></span><div></div>

CSS Code

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

Absolute effect

, the span tag is set to absolute positioning, you can set the height and Width properties, and do not occupy the original space, the back of the P element will be replaced up.

(4) fixed
The fixed behavior is similar to absolute, but the fixed is offset from the browser window compared to the absolute relative to the indeterminate parent element

Include Block

In the detailed CSS float property we refer to the concept of containing blocks. For the Position property there is also a property that contains blocks, which are discussed in several cases:
1. The root element of the containing block, the root element is usually an HTML element, some browsers will use body as the root element, most browsers, the initial containing block is a window-sized rectangle
2. The containing block of a non-root element, if the element's position is relative or static, its containing block is the most recent block-level box, the content boundary of the table's cell or inline block
We give examples to illustrate,
HTML code

<div>    I am the content of the parent element            <div class= "relative" >        relative positioning elements    </div></div>

CSS Code

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

Include Block

This is the inclusion block for the relative anchor element, for the nearest block-level box, the content boundary of the table's cell or inline block, and the relative positioning element offset from its containing block, we can simply understand the offset relative to its original position.

3. The containing block of the non-root element, if the element's position is absolute, then contains the ancestor element that the block is the nearest position is not static.
In a nutshell, its containing block looks up from the parent element until it finds the first position element that is not static.

Offset property

The previous example already involves an offset attribute, which refers to the offset of the element relative to its containing block, which we call the offset attribute, which is top,bottom,left,right, which in turn represents the upper and lower left and right. Their value can be either a specific value or a percentage. If it is a percentage, top and bottom are relative to the percentage that contains the block height, and left and right are percentages relative to the width. They can also set a negative value, which means that it is possible to move an element outside the containing block.

Absolute positioning

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

Basic absolute Positioning

When an element is set to absolute positioning, it is detached from the document flow and then shifted relative to its containing block.
In general, we will set an element to relative as the inclusion block of the absolute element, let's take a look at the following example:
HTML code

<div class= "Absolute" >        relative to initial include block positioning    </div>    <br/>    <br/> <br    />    <br/>    <br/>    <br/>    <div class= "relative" >        <div class= "Absolute" >            relative to the nearest relative ancestor element location        </div>    </div>

CSS Code

div {background: #0094ff; width:250px; height:100px;}        . Relative {background: #ff6a00; position:relative; width:200px; height:100px; top:20px; left:50px;}        . 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 is not position is not static ancestor element, so its containing block is body, offset according to the body,
The second absolute positioning element sets a relative parent element, which is offset from the parent element.

The overlap problem of absolute positioning

The element is set to absolute positioning and is detached from the document stream, and the space is lost, and if the offset is close to the position, it can cause overlapping problems. Take a look at the following example:
HTML code

<div class= "Relative" >    <div class= "Absolute" >        relative to the nearest relative ancestor element 1    </div>    < Div class= "Absolute light" >        relative to the nearest relative ancestor element positioning 2    </div></div>

CSS Code

div {background: #0094ff; width:250px; height:100px;}. Relative {background: #ff6a00; position:relative; width:500p X height:300px; top:20px; left:50px; }. Absolute {background: #988c8c; position:absolute; width:200px; height:100px; top:20px; left:50px;}. Light {back Ground: #f3d6d6; top:70px; left:80px; }

The overlap problem of absolute positioning

We can see that the second absolute positioning element covers the first element, how to let the first element cover the second element, which will use the Z-index property, which represents the stacking order of elements, by default, Z-index is 0, the higher the value of the element level, Can cover elements below its level, we set the Z-index of the first primary color to 10, and the result is as follows

The overlap problem of absolute positioning

If the hierarchy of two elements is the same, the later elements overwrite the previous element, and by default the second element covers the first element.

Fixed positioning

Fixed positioning is simple, similar to Absoulte, but its inclusion block is a browser window, relatively simple. Common applications such as fixed navigation, back to the top. We will not repeat here, we can find the relevant information.

Relative positioning

Relative positioned elements are offset from the document flow and occupy the original space. In addition, we have to pay attention to one more detail: If an element is set to overlap after the margin is negative, the relative positioned element overrides the normal element. Let's take a look at the following example:
HTML code

<div class= "no-relative" >    element not relatively positioned </div><div class= "Minus-margin" >    negative margin element </div >

CSS Code

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

No overwrite when not relative positioning

By default, two elements are normal elements, after the negative margin property is set, the following element overwrites the previous element, and we modify the first element's class to relative, and we can see the effect as follows:

Overwrite relative positioning

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

The most frequent application of the relative attribute should be the inclusion block of the absolute element, which, in order to limit the offset of the absolute element, often sets its parent element to relative as its containing block.

Application examples

The application of position is very frequent, let me say some common scenarios:

Product label

In the e-commerce Web site, we can often see the top left or right corner of the product there are some such as "new", "Promotion", "hot" and other tags, such as:

Product label

How does this come true, let's simulate:
HTML code:

<div class= "Product" >        I am the product        <span class= "hot" >            sale        </span>    </div>

CSS code:

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

The effect is as follows:

Product label

, there is a label in the upper right corner. The simple principle is to set the parent element relative to position, the label element is absolutely positioned, and then offset to the upper-right corner relative to the parent element.

Auto-Complete box

The Auto-complete box is a very common application, and the resulting drop-down menu also uses the Position property. Let's take a look at the following effect:

Auto-Complete input box

This is a very simple and common down auto-complete box, let's take a look at its HTML and CSS code:
HTML code

<input class= "Search-box" type= "text" placeholder= "Please enter the keyword" value= "position"/>  <ul style= "LEFT:58PX;" >      <li>position Properties </li>      <li>position apps </li>      what <li>position is </li >      <li>position translation </li>  </ul>

CSS Code

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

This principle is also very simple, by setting the drop-down menu for absolute positioning, and then setting its left property to align with the input box.

Of course, there are many applications of position, such as the layout, such as fixed can be used to do stationary navigation menu, the bottom right corner of the page fixed menu, interested students can find relevant information on their own to learn.

Summarize

The Position property is an easy-to-use property for beginners, especially for absolute and relative applications. To use them, first of all from the basic characteristics of absolute and relative to understand, understand their characteristics after the application of the handy, understand the fundamentals, write a few examples from the practice to understand their characteristics, slowly will be familiar with.