CSS position - position property (positioning)

 The CSS position property is a syntax used to set the position of an element. You can define where an element (such as a picture, DIV block, h1, h2... etc.) should be displayed on a web page. For example, set a picture in In the upper left corner of the web page, CSS position must usually be used with attributes such as left and top to let the browser know how far the web page elements are to the left and how far to the top. In addition, it can also be used with z-index to create the effect of stacking pictures together. Most mainstream browsers support the position property effect of CSS .

CSS position position property syntax

position: position parameter;

The position parameter values ​​that can be set by the CSS position property are absolute, fixed, relative, static, inherit, etc. These parameter values ​​have their own characteristics, as listed below.

• absolute: Absolute position. When the page is pulled down, the element will also change position. The position of the element is determined by top, left, right, and bottom.
  
• fixed: The position of the element is fixed and positioned relative to the browser. The position of the element is determined by top, left, right, and bottom.
• relative: Relative position, relative to the position of other elements, the position of the element is determined by top, left, right, and bottom.
• static: This is the default value. If the position is set to static, top, left, right, and bottom will be ignored.
• inherit: inherit the value of the position positioning attribute from the parent layer.

Please note that the current IE browser (version 11.0) and older versions of IE browsers do not support the inherit attribute value. The new version in the future does not know whether it will support it. If your webpage target browser user will use IE browser For browsing, it is recommended not to use the inherit attribute value. Then please see some practical application examples of CSS position.

CSS position position property application example 1: modify the position of a paragraph

p {
　position:absolute;
　top:80px;
　left:80px
}

In the example, we set the position of the <p> element of the web page to absolute (absolute position), 80px from the top (top:80px;), and 80px from the left (left:80px;). Because it is an absolute position, this element does not The location will not change due to other block changes. Since the simple code in the example is not related to other web elements, the P element will only calculate its position to be presented based on the screen border. If it is related to other web elements, please see Example 2. We use two A DIV block to present.

CSS position position property application example 2: Position relationship between two DIV blocks

<style type="text/css">
<!--
#DIV_BIG{
    width:300px;
    height:200px;
    background-color:#FFB326;
    position:relative;
}
#DIV_SMALL{
    width:120px;
    height:100px;
    background- color:#78FF78;
    position:absolute;
    top:20px;
    left:40px;
}
-->
</style>
<div id="DIV_BIG">
    <div id="DIV_SMALL"></div>
</div>

Rendering effect

The second example shows the positional relationship between two DIV blocks. The position of the big orange DIV block is set to "position: relative;". The main purpose is to make the small green block inside use "position: absolute;" ", you can display the position based on the large orange DIV block border, so that the two DIV blocks are related to each other, otherwise the block will be based on the parent layer or the screen. Take the small green block in example 2, because the position is presented based on the big orange block and the position is set to absolute, so when we move the position of the big orange block, the small green block will also be moved , And the position between the two blocks will not change.

Making good use of the relative and absolute properties of CSS position is very important in the position configuration of web page elements.

With the function of the CSS position property, web designers can easily place webpage elements where they want to be placed, such as the position of the website LOGO, the position of the picture in the webpage, the video playback block, the position of the form... . And so on, the application is quite extensive.