| Author |
Topic: CSS Positioning -- Where an element should be laid |
|
CyberSpider
member
offline  |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
 |
|
|
| CSS Positioning -- Where an element should be laid |
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.
|
|
|
|
|
|
|
CyberSpider
member
offline  |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
|
|
|
| CSS Position:Static -- The normal flow |
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.
|
|
|
|
|
|
|
CyberSpider
member
offline |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
|
|
|
| CSS Position: Relative |
On above example, change only static to relative
#box3 {
background-color: blue;
position: relative;
top: 30px;
left: 20px;
}
Try it yourself in sandbox »
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.
|
|
|
|
|
|
|
CyberSpider
member
offline |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
|
|
|
| CSS Position: Absolute |
Now let's change relative to absolute
#box3 {
background-color: blue;
position: absolute;
top: 30px;
left: 20px;
}
Try it yourself in sandbox »
The blue box has been taken away from the normal flow as if it were not there (not even the occupied space). It is now placed at 30px from top and 20px from left, absolutely from the root document or its parent container (the parent container must declare as position:relative).
|
|
|
|
|
|
|
CyberSpider
member
offline |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
|
|
|
| CSS Position: Fixed |
Let's further change the value to fixed
#box3 {
background-color: blue;
position: fixed;
bottom: 30px;
right: 0px;
}
Try it yourself in sandbox »
The blue box has been taken away from the normal flow as if it were not there (not even the occupied space). It is now placed at 30px from bottom and 0px from right, fixedly attached to the view screen regardless of the document or its parent container.
|
|
|
|
|
|
|
|
Email To Friend | 
Set Alert To This Topic
New Topic | 
Post Reply 
posted on: 04/17/2016 12:00:38 AM
Edit
Quote
Report
Profile
Reply