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

How to understand the five attributes of position in css, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

In the actual development of page layout, the use of position, the location of the block-level elements of the nesting effect is always difficult to understand, here are a few tests

In general, we can easily get the definition in W3C

Static: default value. Without positioning, the element appears in the normal flow (ignoring top, bottom, left, right, or z-index declarations).

Fixed: generates absolutely positioned elements that are positioned relative to the browser window. The location of the element is specified by the "left", "top", "right", and "bottom" attributes.

Inherit: specifies that the value of the position attribute should be inherited from the parent element.

Absolute: an element that generates absolute positioning, relative to the first parent element other than static positioning. The location of the element is specified by the "left", "top", "right", and "bottom" attributes.

Relative: a relative positioning element is generated and positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the LEFT position of the element.

In general:

Static, that is, the normal document flow order, by default, is equivalent to no positioning!

Fixed, that is, relative to the browser window, that is, how do you scroll the scroll bar, it is still in that position, it seems to be "glued" to the window!

Inherit inherits the value of the position attribute from the parent element

Absolute is separated from the original position of the document stream will not continue to occupy, if his parent element has been located whether it is absolute or relative, it will be relative to his parent element to locate, if there is no location in his parent element, then it is relative to body. In other words, absolute definitely has a frame of reference!

Relative will not break away from the original position of the document stream and will continue to occupy, it is only relative to its original position to locate!

The first three are easy to understand, and several tests have been done for the combined use of absolute and relative

Testing (absolute and relative)

1. Separate absolute and relative

Relative in relative,absolute in 2.relative

Absolute in absolute,relative in 3.absolute

The code is as follows:

Position-absolute-relative

. test-a {

Position: absolute

Top:20px

Left:60px

Width:200px

Height: 100px

Background: red

}

.test {

Width:400px

Height: 100px

Background: green

}

. test-r {

Position:relative

Top:50px

Left:130px

Background: yellow

Width:160px

Height: 180px

}

. test-rr {

Position: relative

Top: 20px

Left: 100px

Width: 600px

Height: 300px

Background: blue

}

. test-aa {

Position: absolute

Top: 24px

Left: 34px

Background: orange

}

. test-aaa {

Position: absolute

Top: 24px

Left: 34px

Width:400px

Height:200px

Background: # 18E457

}

. test-aaaa {

Position: absolute

Top: 124px

Left: 134px

Width:400px

Height:200px

Background: yellow

}

. test-rrr {

Position: relative

Top: 24px

Left: 34px

Width:400px

Height:200px

Background: yellow

}

. test-rrr {

Position: relative

Top: 124px

Left: 134px

Width:400px

Height:200px

Background: red

}

.test-rmura {

Position: absolute

Top: 124px

Left: 134px

Width:800px

Height:800px

Background: yellow

}

.test-a murr {

Position: relative

Top: 124px

Left: 134px

Width:700px

Height:700px

Background: red

}

Absolute

Split up

Relative

Combined use

ParentNode's position is not relative or absolute, so the absolute object of absolute is aimed at body.

The position of parentNode is relative or absolute, so the absolute object of absolute is aimed at parentNode.

That is to say, absolute definitely has reference to Node.

Relative outside absolute

The absolute, inside the relative is located relative to the div on the outside.

Absolute outside absolute

The absolute in the absolute, the div inside is located relative to the div on the outside.

Relative outside relative

The relative in the relative, in which the div is located relative to the original location

Absolute outside relative

The div in the absolute, in relative is relative to the original location.

In fact, most of the time, the online experience, a lot of very complicated, their own practice, they can really understand.

Interpretation of the usage of three position attribute values in CSS

This article gives you a brief introduction to the use of position attribute values in CSS, including static: default, relative: relative positioning, absolute: absolute positioning, mainly used to locate the location of html elements, and affect the way element blocks are generated. I believe this article will be helpful to you.

Usage of position attribute value in CSS

There are four optional values for the position attribute in CSS: static,relative,absolute,fixed, which locates the location of the html element and affects how the element block is generated. Here we focus on the three value definitions of the position property: position:static, absolute, and relative.

Static: default

If you do not specify the value of the position attribute, the html objects that support the position attribute are static by default. It can be understood this way: think of the html page as a document stream, and the location of the tags in the source code is the order in which the objects corresponding to them are rendered. All objects with a value of static are presented in the order in which you write the html tags.

Relative: relative positioning

The value of this position property maintains the position of the object in the document stream, that is, it is rendered in the same way as static, it also occupies a fixed position in the document stream, and subsequent objects will not encroach on or override With the static attribute value is different, set the relative of the object, you can set their own new display position through the top,left,right,bottom attribute, the value of these four attributes is relative to the previous object of the document stream, you are free to set these four attributes offset to the new location without any impact on other objects in the document stream, the original page rendering will still go its own way.

Absolute: absolute positioning

Unlike relative, this position property value will drag the current object out of the document stream, and the subsequent object will occupy the original position, that is, the rendering of the current object is displayed independently, but its location is still inherited before any attribute of top,left,right,bottom is specified, so the values of the four properties are relative to the browser and have nothing to do with the document stream. If you set the B area in the example to absolute instead of specifying four location attributes, you can change its relative position by setting margin. This method can solve the previously mentioned problem 2.

Warm reminder:

The z-index property whose value is the absolute object can set the order of cascading display, which is directly valid The z-index property with a value of relative should be set carefully. It is not possible to set the z-index of the current object to-1, because it cannot be displayed in firefox. (note, it is not said that the browser is incorrect, but that if the parent object is the root element body, then z-index is invalid, and any z-index setting will not be displayed after the root element. Except for the parsing bug of IE, thanks # 19 hint), it must be set to more than 0. If we want other objects to block it, we have to set position to relative for other objects and set the z-index property to a larger value.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.