Shulou(Shulou.com)06/01 Report--

This article will explain in detail what is the use of the position attribute in the css style layout. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

The position attribute, which defines the type of positioning used to establish the layout of the element, has multiple values:

Value

Description

Static

Default value. Without positioning, the element appears in the normal flow (ignoring the top,bottom,left,right or z-index declaration).

Relative

The relative positioning label is generated and positioned relative to the original position of the label. Therefore, "left:20" adds 20 pixels to the left position of the tag.

Absolute

Generates a relatively positioned tag that locates the non-static parent element relative to the first position of the tag itself. The location of the tag is specified by the "left", "top", "right" and "bottom" style attributes. If the parent tag of the tag does not set position to non-static, it is positioned relative to the browser window, but the element slides with the scroll.

Fixed

Generates an absolutely positioned label, positioned relative to the browser window, where the element does not slide with the scroll key. The location of the element is specified by the "left", "top", "right", and "bottom" attributes.

(document flow, also known as normal flow, is an order in which HTML elements are automatically streamed from top to bottom or left to right during layout by default.)

Note: any element can be located, but the absolute or fixed element generates a block-level box, regardless of whether the element itself is a block-level box. The relative element is offset from its default position in the normal flow. The value of the "inherit" property is not supported by IE browsers.

When a tag uses the positionCSS style attribute, if its style attribute value is non-static (regardless of inherit), the tag will deviate from the normal document stream. If the attribute values of the "left", "top", "right" and "bottom" style attributes are not specified, the tag will only stay in its original position, but it has deviated from the normal document stream.

The following is the demonstration code:

# z {

Width:300px

Height:300px

Border:1pxsolidroyalblue

Position:relative

}

# a,#b,#c {

Width:100px

Height:100px

}

# a {

Background:red

Position:relative

Right:10px

}

# b {

Background:green

Position:fixed

Left:1000px

Bottom:20px;/* only needs to specify two directions, up and down, left and right each choose one * /

}

# c {

Background:yellow

Position:absolute

Left:10px

Bottom:3px

}

/ / A space is used to review the block-level element properties of div

/ / after adding spaces, the div of c will automatically wrap the attributes of block.

Demo notes:

In position:

Relative is located relative to the original location point of the tag. It still exists in the document stream.

Fixed is positioned relative to the entire browser, directly ignoring the tag elements in the browser, which is similar to "floating".

The absolute is positioned relative to the first (parent) element of the previous level [e. G. B to z] (required to be a non-static attribute) and the positioning standard is determined according to the outer border of the parent element

On "what is the use of position attributes in css-style layout" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.