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:relativeThe element follows the normal document flow, so surrounding elements will not ignore its existence.relativeelements also supporttop, bottom, left, rightand other attributes. When we usetop, bottom, left, rightand other attributes to relatively position therelativeelement, the effect is somewhat similar to the effect achieved by themarginattribute, but there are differences The problem is that elements surrounding therelativeelement will ignore the movement of therelativeelement

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

absolute:absoluteThe element will be separated from the normal document flow, so its surrounding elements will ignore its existence. Just like thedisplayattribute of theabsoluteelement is set tonone. At this time, we can usetop, bottom, left, rightand other attributes to absolutely position theabsoluteelement. 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,fixedelement positioning has nothing to do with its parent element. It is always positioned relative to the outermostwindow.
Second, thefixedelement 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!