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

This article shares with you the content of the sample analysis of position:absolute in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I. the characteristics of absolute positioning

Absolute positioning has the same characteristics as floating, that is, inclusiveness and destructiveness.

In terms of destructiveness, the float only destroys the height of the element and retains the width of the element; the absolute positioning of the element's height and width is gone.

Take a look at the following code:

Absolute positioning features .box1, .box2, .box3 {background-color: orange; margin-bottom: 30px;} .absolute {position: absolute;} .roomper {display:inline-block Margin-left: 300px;} .float {float: left;} .box3 {position: absolute;}

These are two images in a normal stream.

In the image on the left, the first image is absolutely positioned, which is completely out of the document stream and overlaid on the second image; thus, the destructiveness of absolute positioning makes the element lose not only its height, but even its width.

On the right, float the first image to the left, which is out of the document stream, but does not cover the other elements; the destructiveness of the float only destroys the height of the element and retains the width of the element.

The container is absolutely positioned to reflect its encapsulation.

2. General rules of absolute positioning:

When an element is absolutely positioned, it is completely detached from the document stream and positioned relative to its containing block.

The absolutely positioned containing block is its nearest positioned ancestor element.

If the ancestor element is a block-level element, the containing block is the inner margin boundary of the ancestor element, that is, the border.

If the ancestor element is an inline element, the containing block is the content boundary of the ancestor element, that is, the content area.

If there is no ancestor element that has been positioned, the inclusion block of the element is defined as the initial inclusion block.

Offset attributes: top, right, bottom, left.

If the absolutely positioned element does not set the offset attribute, it is out of the document stream, but its position is still in place.

The offset attribute can be negative, positioning the element outside the containing block.

The code is here:

General rules for absolute positioning body {background-color: # ccc;} .container {width:500px; background-color: orange; margin:20px auto 50px auto; padding:20px; border:2px solid red } .box2 img,.box3 img,.box4 img,.box5 img {position: absolute;} .box3 img,.box4 img {left:0; bottom:0 } .box5 img {left:-30px; bottom:-50px;} .block {position: relative; height: 200px;}

When an element is absolutely positioned, it is completely detached from the document stream and positioned relative to its containing block. The absolutely positioned containing block is its nearest positioned ancestor element.

If the ancestor element is a block-level element, the containing block is the inner margin boundary of the ancestor element, that is, the border. If the ancestor element is an inline element, the containing block is the content boundary of the ancestor element, that is, the content area. If there is no positioned ancestor element, the inclusion block of the element is defined as the initial inclusion block (a window-sized rectangle).

Regardless of whether there are ancestral elements that have been located, as long as there is no offset, after absolute positioning, stay in place and leave the document stream.

The following image, which has been absolutely located, remains intact, but is out of the document stream.

There is no ancestor element that has been located, there is an offset, and after absolute positioning, the offset is based on the initial containing block (a rectangle the size of a window).

When the offset is left:0; buttom:0, the image is horizontally offset to the lower-left corner of the original inclusion block (the lower-left corner of the window that opens the beginning of the page).

There are ancestral elements that have been located, and there is an offset. After absolute positioning, they are offset based on the ancestral elements that have been positioned.

The ancestor element that has been located here is the container div element of the image. When the offset is left:0; bottom:0, the image reaches the lower-left corner of the container (bounded by a border).

There are ancestral elements that have been located, and there is an offset. After absolute positioning, they are offset based on the ancestral elements that have been positioned.

The ancestor element that has been located here is the container div element of the image, and when the offset is left:-30px; bottom:-50px, the image is outside the container (bounded by a border).

Third, use margin to adjust the position of absolute positioning elements

Absolute positioning elements, in addition to the use of top, right, bottom, left for offset, but also through the edge value for accurate positioning, and better adaptability.

Example:

Use margin to adjust the position of absolute positioning elements .box1, .box2, .box3 {display: inline-block; margin-right: 150px; border:1px solid blue;} span {background-color: red } .box2 span,.box3 span {position: absolute;} .meng {margin-left:-3em;} .box4 {border:1px solid red; width: 500px Margin: 50px auto 0 auto; padding:20px;} li {margin-bottom: 20px;} Kawayi

Cute Kawayi

Cute Kawayi

The cute first picture, the very beginning. In the second picture, the two tags are absolutely positioned, but no offset is specified. The third picture, using the negative value of margin to adjust the position of "cute", completed.

Abandon the offset attribute and use margin to adjust the absolute positioning element instead, the principle is as follows:

An element that is absolutely positioned, although it is completely out of the document stream without setting the offset, it is still in its original position.

Using the offset attribute for accurate positioning, its specific location depends on the inclusion block of the absolute positioning element, and different inclusion blocks will have completely different positioning results.

The use of margin for accurate positioning, does not rely on anything else, more controllable.

IV. Absolute positioning and overall layout

How to use absolute positioning to layout the page as a whole?

Absolute positioning and overall page layout * {margin: 0;} / * reset all margin to 0, this step is extremely important, otherwise the layout will be messy. * / html,body,.page {width: 100%; height: 100%; overflow: hidden;} .page {position: absolute; top: 0; right: 0; bottom: 0 Left: 0; background-color: # ccc;} .header {position: absolute; height: 50px; left: 0; right: 0; background-color: purple; padding: 0 5px Z-index: 1;} .header > H2 {line-height: 50px; text-align: center;} .aside {position: absolute; top: 50px; bottom: 50px Left: 0; width: 100px; background-color: orange;} .footer {position: absolute; right: 0; bottom: 0; left: 0; height: 50px Background-color: purple;} .footer > H2 {text-align: center; line-height: 50px;} .content {position: absolute; top: 50px; right: 0 Bottom: 50px; left: 100px; background-color: cyan; overflow: auto;} .content H2 {margin-top: 100px; margin-left: 50px } .content li {margin-left: 100px; margin-top: 80px; font-size: 24px; line-height: 1.5;} ol {margin-bottom: 80px } Header Aside implementation principle to create a div.page, absolute positioning, full screen. Create a div.header, absolute positioning, set height. Create a div.aside, absolutely position, and set the width. Create a div.footer, absolute positioning, set height. Create a div.content, absolute positioning, set its width and height according to the width and height of the surrounding div; replace the original body element with the div.content element, where all the page content is placed. Footer, thank you for your reading! This is the end of this article on "sample Analysis of position:absolute in CSS". 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.