Home > Developer > JavaScript
Understanding about absolute positioning: absolute positioning
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> understanding about absolute positioning </title>
</Head>
<Style type = "text/css">
/* 1. Before being positioned, a large box wrapped in a small box conforms to the standard document stream, as shown in figure 1.
. Box1 {
Width: 500px;
Height: 500px;
Background: red;
}
. Box2 {
Width: 200px;
Height: 200px;
Background: blue;
}*/
Image 1
/* 2. Absolute positioning makes the element's position irrelevant to the Document Stream, so it does not occupy space.
This is different from relative positioning. Relative positioning is actually considered as part of a common stream positioning model,
Because the position of an element is relative to its position in a normal stream. Relative to the most recently located ancestor element,
If an element does not have an ancestor element that has been located, its position is relative to the initial contained block. 2.
. Box1 {
Width: 500px;
Height: 500px;
Background: red;
Position: relative;
}
. Box2 {
Width: 200px;
Height: 200px;
Background: blue;
Position: absolute;
Top: 150px;
Left: 150px;
}*/
Image 2
/* 3. If box2 has no width or height, and no positioning is set, box2 will be wrapped in box1, which conforms to the standard document stream and occupies the position of the document,
The width inherits the width of the parent element, and the height is automatically supported by the content. Part 3.
. Box1 {
Width: 500px;
Height: 500px;
Background: red;
}
. Box2 {
Background: blue;
}*/
Image 3
/* 4. If box2 does not have a width or height, box2 will leave the Document Stream and its position is relative to the relative positioning element,
Width will expire, that is, width and height are automatically supported by the content. 4. If you need width and height, you need to set it again */
. Box1 {
Width: 500px;
Height: 500px;
Background: red;
Position: relative;
}
. Box2 {
Background: blue;
Position: absolute;
Top: 150px;
Left: 150px;
}
Image 4
</Style>
<Body>
<Div class = "box1">
<Div class = "box2"> This is a small box </div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
