-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy path3.absolute_pos.html
52 lines (50 loc) · 1.25 KB
/
3.absolute_pos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<title>Absolute Positioning</title>
<style>
/* Absolutely positioned elements do not follow the normal flow.
Instead they stack over one another along the z-axis if their positioning is such that an overlap might occur.
This is because absolute positioning puts the element absolutely in the specified area.
Think of absolute like velcrow. Where ever you specifiy the element should stick it will stick.*/
#red_box {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #ee3e64;
}
#blue_box {
position: absolute;
top: 0;
right: 0; /* Changing this line to left: 0; instead of right: 0; will illustrate the overlap effect that is possible with absolute. */
width: 200px;
height: 200px;
background: #44accf;
}
#green_box {
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: #b7d84b;
}
#yellow_box {
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #ebde52;
}
</style>
</head>
<body>
<div id="red_box">Absolute</div>
<div id="blue_box">Absolute</div>
<div id="green_box">Absolute</div>
<div id="yellow_box">Absolute</div>
</body>
</html>