Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to achieve absolute positioning in css". In daily operation, I believe many people have doubts about how to achieve absolute positioning in css. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to achieve absolute positioning in css"! Next, please follow the editor to study!

one。 Basic concepts:

If the relative positioning does not deviate from the document flow, and the offset relative to the object itself is a bit muddy, then absolute positioning is definitely a quick way to cut the mess, because absolute positioning can make an object out of the normal document flow. It seems that it floats over the normal document flow and is positioned relative to the element that contains the object. Of course, this positioning relative to the element is different in different situations.

two。 How to set an element to absolute positioning:

You can set the object to absolute positioning by adding the following attributes to the object:

The code is as follows:

Position:absolute

Or

The code is as follows:

Position:fixed

three。 Locate the reference object:

You can set the offset of an absolute positioning object using the top property and the left property.

Although absolute positioning is separated from the document stream, it also requires a reference object for positioning, but the reference object is also different in different cases.

1. If the top or left attribute value is not set, then the positioning reference object of the corresponding orientation is the first-level parent element of this object. The code example is as follows:

The code is as follows:

The absolute position of CSS-ant tribe

Body

{

Margin:20px

}

# grandfather

{

Width:330px

Height:300px

Background-color:#F90

}

# father

{

Width:200px

Height:200px

Background-color:green

Margin-left:50px

}

# children

{

Width:100px

Height:100px

Background-color:red

Float:right

}

# inner

{

Width:50px

Height:50px

Background-color:blue

Position:absolute

Top:10px

}

In the above code, because the inner element is absolutely positioned and the left attribute value is not set, the positioning reference object in the horizontal orientation is the first-level parent element children of the inner element. Of course, if the top attribute value is not set, then the vertical orientation of the positioning reference object is also children.

two。 If the left or top attribute value is set:

1)。 If any of the ancestor elements adopt positioning, then the positioning reference object of the corresponding orientation of this object is this ancestor element. If the ancestor element is not positioned, then the positioning reference object of the corresponding orientation is the browser client area. The code example is as follows:

Example 1:

The code is as follows:

The absolute position of CSS-ant tribe

Body

{

Margin:20px

}

# grandfather

{

Width:330px

Height:300px

Background-color:#F90

}

# father

{

Width:200px

Height:200px

Background-color:green

Margin-left:50px

Position:relative

}

# children

{

Width:100px

Height:100px

Background-color:red

Float:right

}

# inner

{

Width:50px

Height:50px

Background-color:blue

Position:absolute

Left:10px

Top:10px

}

In the above code, the inner element uses absolute positioning, and its ancestor element father uses relative positioning, so its positioning reference object is father.

Example 2:

The code is as follows:

The absolute position of CSS-ant tribe

Body

{

Margin:20px

}

# grandfather

{

Width:330px

Height:300px

Background-color:#F90

}

# father

{

Width:200px

Height:200px

Background-color:green

Margin-left:50px

}

# children

{

Width:100px

Height:100px

Background-color:red

Float:right

}

# inner

{

Width:50px

Height:50px

Background-color:blue

Position:absolute

Top:10px

}

In the above code, the inner element is absolutely positioned, and its ancestor element is not positioned, then the vertical orientation reference object is the window, and since the left attribute value is not set, then the horizontal orientation reference object is its first-level parent element children.

four。 Absolute positioning elements are detached from the document stream:

As mentioned at the beginning, absolute positioning can detach an element from the document flow, so that the element in the document stream around it can occupy the position where the element is not detached from the document flow.

The code example is as follows:

The code is as follows:

The absolute position of CSS-ant tribe

Div

{

Text-align:center

Line-height:100px

}

.father

{

Width:400px

Height:400px

Background-color:green

Margin:50px

}

.first

{

Width:100px

Height:100px

Background-color:red

Position:absolute

}

.second

{

Width:120px

Height:120px

Background-color:blue

}

First

Second

At this point, the study on "how to achieve absolute positioning in css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.