-
Notifications
You must be signed in to change notification settings - Fork 0
/
position.html
30 lines (29 loc) · 1.22 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
<!DOCTYPE html>
<html>
<head>
<title>Position 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: 50px; z-index: 100;">
Header
</div>
<div style="background-color: green; color: white; position: fixed; bottom: 0px;left: 0px; top: 50px; width: 72px;">
sidebar
<div style="background-color: red; position: absolute; color: white; top: 0px; right: 0px;">
X
</div>
</div>
<div style="background-color: red; position: absolute; color: white; left: 10px; top: 10px;">
absolute
</div>
<div style="background-color: lightblue; height: 200px; width: 200px; position: static;">
div 1
</div>
<div style="background-color: lightpink; height: 200px;width: 200px; position: relative;">
div 2
<div style="background-color: black; position: absolute; color: white; bottom: 10px; right: 10px;">
5:00
</div>
</div>
</body>
</html>