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

This article shows you how to understand the usage of DIV location. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can gain something through the detailed introduction of this article.

Whether you know the concept and usage of DIV positioning, I would like to share with you here, including no positioning, relative positioning and absolute positioning and so on.

Detailed explanation of the usage of DIV location

1.position:static | No location

Position:static is the default value for all element positioning, which is generally not specified, unless there is a need to cancel inherited positioning.

Example:

# div-1 {position:static;}

2.position:relative | relative positioning

With position:relative, you need top,bottom,left,right4 attributes to work together to determine the location of the element.

If you want the div-1 layer to move 20px down, move 40px to the left:

Example:

# div-1 {position:relative; top:20px; left:40px;}

If relative positioning is used, the layer divafter that follows him will not appear below the div-1, but at the same height as the div-1. As you can see, position:relative; doesn't work very well.

3.position:absolute | absolute positioning

Using position:absolute;, you can accurately move the element to the location you want.

Let me move div-1a to the upper right corner of the page:

Example:

# div-1a {position:absolute; top:0; right:0; width:200px;}

Layers in front of or behind div-1a layers that use absolute positioning will assume that this layer does not exist and does not affect them at all. So position:absolute; is useful for placing an element in a fixed location, but not if you need a div-1a layer to locate it relative to a nearby layer.

* there is a bug for winie that needs to be mentioned, that is, if you define a relative width for an absolutely positioned element, then its width under ie depends on the width of the parent element rather than the width of the entire page.

4.position:relative+position:absolute | absolute positioning + relative positioning

If the parent element (div-1) is defined as the position:relative; child element (div-1a) is defined as position:absolute, then the position of the child element (div-1a) will be relative to the parent element (div-1), not the entire page.

Position div-1a in the upper right corner of div-1:

Example:

Thisisdiv-1aelement. Thisisdiv-1element. # div-1 {position:relative;} # div-1a {position:absolute; top:0; right:0; width:200px;} the above is how to understand the use of DIV location. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are 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.