Absolute positioning refers to the element that is closest to the element that is detached from the standard stream , and is positioned relative to the upper-left corner of the body if there is no parent element (or parent element, but the parent element is not detached from the standard stream).
HTML file:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
Examples of <title>css absolute positioning </title>
<link rel= "stylesheet" style= "Text/css" href= "Test1.css"/>
<body>
<div class= "Div1" >
Content 1
</div>
<div class= "Div1" >
Content 3
</div>
<div class= "Div1" >
Content 4
</div>
<div class= "Div2" >
<div class= "Div1" id= "Special" >
Content 2
</div>
</div>
</body>
CSS file:
. div1{
width:70px;
height:30px;
margin-left:5px;
Background:silver;
Float:left; /* Left FLOAT * *
}
#special {
position:absolute;/* Absolute Positioning * *
left:40px;
top:100px;
}
. div2{
position:relative;/* relative positioning, separated from the standard flow * *
left:100px;
top:100px;
width:200px;
height:150px;
Background:pink;
Float:left;
}The effect of the following figure:
This article address: http://www.bianceng.cn/web/Css/201608/50325.htm
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
