Subject: CSS Position:Static -- The normal flow
Author: CyberSpider
In response to: CSS Positioning -- Where an element should be laid
Posted on: 04/17/2016 12:30:31 AM
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>
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;
}
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;
}
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.
>
> On 04/17/2016 12:00:38 AM
CyberSpider wrote:
Where should I put this element? This is the most fundamental question you have to ask yourself while you are laying out your webpage.
Positioning an block-level element involves the following CSS properties:
top -- auto, 20px, 5.0em, 10%;
right -- auto, 20px, 5.0em, 10%;
bottom -- auto, 20px, 5.0em, 10%;
left -- auto, 20px, 5.0em, 10%;
z-index -- auto, -1, 0, 1;
position -- static, relative, absolute, fixed.
z-index specifies the priority to display in case of overlap. The box with bigger value will be shown on top of the other. The values of top, right, bottom and left, however, can be interpreted by browser differently depending on position.
References:
