Subject: CSS Position: Relative
Author: CyberSpider
In response to: CSS Position:Static -- The normal flow
Posted on: 04/17/2016 05:59:50 AM
On above example, change only static to relative
#box3 {
background-color: blue;
position: relative;
top: 30px;
left: 20px;
}
Now you can notice that the blue box (Box#3) has shifted a little bit. The exact amount of shifting is
30px from
top and
20px from
left,
relatively compared to its normal position.
>
> On 04/17/2016 12:30:31 AM
CyberSpider wrote:
Consider a container having 5 boxes:
.container {
margin: 5px;
border: 2px dashed #000000;
width: auto;
height: 320px;
}
.box {
margin: 10px;
width: 80px;
height: 50px;
}
#box1 {background-color: red;}
#box2 {background-color: green;}
#box3 {background-color: blue;}
#box4 {background-color: yellow;}
#box5 {background-color: fuchsia;}
<DIV class="container">
<div class="box" id="box1">Box#1</div>
<div class="box" id="box2">Box#2</div>
<div class="box" id="box3">Box#3</div>
<div class="box" id="box4">Box#4</div>
<div class="box" id="box5">Box#5</div>
</DIV>
Try it yourself in sandbox »
As it can be seen, the normal flow is that each box starts with a new line and shows up one after another vertically.
Let's add one more line -- display: inline-block
.box {
display: inline-block;
margin: 10px;
width: 80px;
height: 50px;
}
Try it yourself in sandbox »
Now, the block elements are shown in inline-block mode -- one after another horizontally. This is also a normal flow.
Position:Static
#box3 {
background-color: blue;
position: static;
top: 30px;
left: 20px;
}
Try it yourself in sandbox »
As it can be seen that static doesn't change the flow and top:30px; left:20px make no impact as if there were not existing.
References:
