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

This article mainly shows you the "CSS positioning, CSS position attribute how to use", the content is easy to understand, clear, hope to help you solve doubts, the following let Xiaobian lead you to study and learn "CSS positioning, CSS position attribute how to use" this article.

The core of the layout is the position attribute, which can be repositioned relative to its position in the regular document flow by applying this attribute to the element box. The position property has four values: static, relative, absolute, fixed, and the default value is static.

Static: default document stream, normal display; relative: relative positioning; absolute: absolute positioning; fixed: fixed positioning.

HTML Code:

Positioning

one

two

three

four

Css:

* {

Margin: 0

Padding: 0

}

P {

Position: static

Background: # ccc

Margin-bottom: 15px

}

# p2 {

Position:relative

Top: 20px

Left: 20px

}

1 set the position attribute of the second p element to (absolute positioning) relative, and set the top and left values:

The figure shows:

It was found that the second paragraph moved 20px down and to the right relative to the original position.

Conclusion: the absolutely positioned element will change relative to its default position in the document stream; and this element will not affect other elements, but will change relative to its original position.

PS: you can set negative values for the top and left attributes to move the element up and left.

2 change the attribute of the second p element position to (relative positioning) absolute, and set the top and left values:

Found: the second paragraph moves the 20px down and to the right relative to the browser window. And the original position is occupied.

Conclusion: body is used as the reference for relative positioning by default, and relative positioning has been separated from the document stream, margin-bottom: 15px; is invalid.

PS: if relative is set to the position attribute of the parent element, the parent element is used as the reference. If there is no parent element, see if there is a parent element of the parent element, and if none, then use body as the reference.

3 change the attribute of the second paragraph position to (fixed positioning) fixed, and set the top and left values:

It is found that similar to absolute positioning, fixed actually means that a fixed position in the body does not change as the page scrolls.

The above is all the content of this article entitled "CSS location, how to use the position attribute of CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.