<! DOCTYPE html>/* 1. Is not set before positioning is a large box wrapped in a small box, conforms to the standard document flow, shown in sheet 1
. box1{width:500px;height:500px;background:red;}. Box2{width:200px;height:200px;background:blue;} */Picture 1
/*2. Absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space.This is different from relative positioning, and relative positioning is actually considered as part of the normal flow positioning model.
Because the position of the element is relative to its position in the normal stream. The position of an absolutely positioned element is relative to the nearest positioned ancestor element,
If an element does not have an ancestor element that has been positioned, its position is relative to the original containing block.2 is shown
. box1{width:500px;height:500px;background:red;position:relative;}. box2{width:200px;height:200px;background:blue;position:absolute;top:150px;left:150px;} */Picture 2
/*3, Box2 is not wide and without positioning, box2 is box1 wrapped, conforms to the standard document flow, and occupies the document position,
Width inherits the width of the parent element, and the height is automatically stretched by the content.Slice 3.
. box1{width:500px;height:500px;background:red;}. Box2{background:blue;} */Picture 3
/*4, Box2 not wide in the case of setting positioning, the Box2 is detached from the document stream, and the position is specified relative to the relative position of the element.
The width will fail, that is, the width and height are automatically open by the content. Sheet 4. If you need to set the width of a different */. box1{width:500px;height:500px;background:red;position:relative;}. box2{background:blue;position:absolute;top:150px;left:150px;}Picture 4
</style><body><p class= "Box1" ><p class= "Box2" > This is a small box </p></p></body>The above is a comprehensive understanding of the absolute positioning is the small part of the whole content to share to everyone, I hope we can give you a reference, but also hope that we support a lot of topic.alibabacloud.com.
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
