In-depth understanding of position in html5

Position of CSS is very important. Position has a total of 4 attribute values, which are the following values:

static, relative, absolute, fixed.

The position of the element is specified through the "left", "top", "right" and "bottom" attributes, and the display level is controlled through z-index.

static: static positioning. If you do not set the position attribute, the default is static. Attributes such as top, left, bottom, and right are invalid when static. To use these attributes, position must be set to one of the other three values.

relative: relative The element follows the normal document flow, so surrounding elements will not ignore its existence. relative elements also support top, bottom, left, right and other attributes. When we use top, bottom, left, right and other attributes to relatively position the relative element, the effect is somewhat similar to the effect achieved by the margin attribute, but there are differences The problem is that elements surrounding the relative element will ignore the movement of the relative element

# p 
{
background:#ccc; width:200px; height:200px;
position:relative; left:200px; top:200px
}

absolute: absolute The element will be separated from the normal document flow, so its surrounding elements will ignore its existence. Just like the display attribute of the absolute element is set to none. At this time, we can use top, bottom, left, right and other attributes to absolutely position the absolute element. Generally, two attributes are defined, top or bottom, left or right.

# p 
{
background:#ccc; width:200px; height:200px;
position:absolute; left:200px; top:200px
}

fixed: Fixed positioning. The element will be set to a fixed position on the browser and will not scroll with other elements. To put it figuratively, when the scroll bar is pulled up or down, the position of the fixed element on the screen does not change. It should be noted that IE6 does not support this attribute.

First of all, fixed element positioning has nothing to do with its parent element. It is always positioned relative to the outermost window .
Second, the fixed element is just like its name, it is fixed at a certain position on the screen, and it will not disappear due to scrolling of the screen.

# p 
{
background:#ccc; width:200px; height:200px;
position:fixed; left:200px; top:200px
}

The position attribute is crucial in CSS layout. A true understanding of the position attribute will help you learn in the future. p plus CSS is of great help

The above is the detailed content of In-depth understanding of position in html5. For more information, please follow other related articles on the PHP Chinese website!