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

This article shares with you the content of an example analysis of four attributes in CSS positioning. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSSposition attribute

There are four attributes in total:

Static

The default value, which is normally the attribute, usually does not have to be written.

Relative

Offset the elements, use top,right,left,bottom for offset, and use z-index to separate layers.

Div {

Float:left

Width:100px

Height:100px

Background:pink

Text-align:center

Line-height:100px

Margin-left:10px

}

.box {

Position:relative

Top:20px

Left:20px

}

one

two

three

Winston

Relative is offset on its own basis. That is, relative to their own position.

Absolute

Relative to the body or relative to the parent element that has been positioned closest to you.

.box1 {

Width:100px

Height:100px

Background:red

Position:absolute

Top:100px

Left:250px

}

.box2 {

Width:200px

Height:200px

Background:pink

Position:relative

Top:10px

}

.box3 {

Width:100px

Height:100px

Background:blue

Position:absolute

Top:50px

Left:50px

}

one

twenty-three

Winston

Fixed

The fixed positioning assignment is always positioned at the top left of the browser's window. No matter how much the mouse rolls, it is positioned at the top left of the browser window after you move it. Like many official websites, the navigation bar uses a fixed positioning, so that it has been at the top to feel the peak of loneliness.

Note: these three positioning will be separated from the document stream, the use should be appropriate!

Thank you for reading! This is the end of this article on "sample analysis of four attributes in CSS positioning". 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, you can share it 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.