Home > Developer > Web Develop
In the process of making Web pages, it is unavoidable to use absolute positioning, absolute positioning is a window directly to a coordinate, the use is very convenient, but at the same time, many people in use, also produced another problem, it is not good control, obviously the parent block element has moved, What is going on when you use an absolutely positioned sub-block and don't move?
Let's start by explaining one of the characteristics of absolute positioning:elements that use absolute positioning have been "floated", and since it has floated out of the parent block, it is no longer controlled by the parent block.
And look at one of the following examples:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<style>
. outer
{
background:red;
width:500px;
height:500px;
margin:0 Auto;
}
. Middle
{
Background:grey;
width:250px;
height:250px;
/*position:relative;*//* This sentence is the key, the absolute positioning in the sub-block is relative to its previous relative positioning of the * *
margin:50px 0 0 150px;;
}
. Inner
{
Background:green;
Position:absolute;
left:100px;
top:20px;
width:100px;
height:100px;
}
</style>
<body>
<div class= "outer" >
<div class= "Middle" >
<div class= "inner" >
Test Absolute
</div>
</div>
</div>
</body>
The results of the operation are as follows:
No matter how you change the position of the parent block (the red, gray part of the picture), the green sub-block will not change its position. So how do you make the green chunk change as the parent block changes position, in other words, how to keep the block with absolute positioning in a fixed relative position with the parent block?
It's really simple, just add a CSS code to the parent block where you need to keep the relative position "position:relative;
"Can, for example, add position:relative to the gray middle, the green sub-block will remain relative to the gray parent block, regardless of how the parent block's position is changed, the green child block will be gray to the left 100px, the top 20px.
If Position:relative is not added to the gray block, and the code is added to the red outer, the green sub-block will be similar to the one above, no longer obey the gray block, and keep a relative position with the red block.
If Position:relative is added to the red and gray blocks, the green sub-block retains a relatively constant position relative to the gray block closest to it.
A point of note: Relative positioning is offset relative to the current position of the container.
css-how to keep an absolutely positioned container in relative position to the parent block
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
