<!--Absolute Positioning:
when the Position property value is set to absolution, the absolute positioning of the element is turned on
features of the absolution:
1. Absolute positioning is turned on, leaving elements out of the document
2. But absolute positioning is turned on, and if no offset is set, the position of the element is not changed
3. Absolute positioning is relative to the location of the nearest ancestor that opened the position (in general, the absolute positioning of the child element opens the relative positioning of the parent element )
If all ancestor elements are not positioned, they will be positioned relative to the browser window
4. Absolute positioning causes one element to ascend one level
5. Absolute positioning changes the nature of the element
(1) inline elements become block elements
(2) The width and height of the block elements will be open by default
-
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>postion</title>
<style>
. box1{
width:200px;
height:200px;
background:red;
}
. box2{
width:200px;
height:200px;
Background:yellow;
Position:absolute;
left:200px;
top:0px;
}
. box3{
width:400px;
height:400px;
Background:green;
position:relative;
/* Turn on relative positioning of box4 */
}
. box4{
width:300px;
height:300px;
Background:papayawhip;
}
. sp{
width:200px;
height:200px;
Background:cyan;
Position:absolute;
}
</style>
<body>
<div class= "Box1" ></div>
<div class= "Box3" ><div class= "box4" ><div class= "Box2" ></div></div></div>
<span class= "SP" > this is a span</span>
</body>
Absolute positioning--absolution
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
