-
Notifications
You must be signed in to change notification settings - Fork 0
/
position.html
94 lines (87 loc) · 2 KB
/
position.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!--position helps to make the header fixed and stay above the page
position has an attribute called top which tell how far fromt the top of the page the header is placed-->
<!--same goes with right, lex and bottom-->
<!--Position fixed the element is placed in the browser window-->
<!--position absolute the element is placed on the page-->
<!--z-index tells which element is above and which element is below the header-->
<!--if z-index is higher then it appears on top of the other-->
<!--when position absolute is there then it is place in relation to the div element inside which it is placed-->
<!DOCTYPE html>
<html>
<head>
<title>
Practice
</title>
</head>
<body style="
height:3000px;
padding-top:60px;
padding-left: 80px;">
<div style="
background-color: black;
color:white;
position:fixed;
top:0px;
left:0px;
right:0px;
height:40px;
z-index:100;">
header
</div>
<div style="background-color:green;
color:white;
position:fixed;
left:0;
bottom:0;
top:50px;
width:72px">
sidebar
<div style="
position:absolute;
background-color: red;
color:white;
top:60px;
right:10px;
z-index:0;
">
>
absolute
</div>
</div>
<div style="
position:absolute;
background-color: red;
color:white;
top:60px;
right:10px;
z-index:0;
">
>
absolute
</div>
<div style="
background-color: lightblue;
height:200px;
width:200px;
position: static;">
div1
</div>
<div style="
background-color: lightpink;
height:200px;
width:200px;
position:relative">
div2
<div style="
position:absolute;
background-color: black;
color:white;
z-index:0;
bottom:10px;
right:10px;
">
5:00
</div>
</div>
</body>
</html>