Skip to content

Commit ec91cdd

Browse files
code-warriorcode-warrior
committed
Add example of absolute positioning
1 parent 8ca9e1f commit ec91cdd

File tree

5 files changed

+79
-0
lines changed

5 files changed

+79
-0
lines changed

‎tutorials/css/positioning/absolute/css/style.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
#the-sea {
2+
position: relative;
3+
margin: auto;
4+
width: var(--width--the-sea);
5+
height: var(--height--the-sea);
6+
background: var(--color-of-the-sky) var(--image-of-the-sea);
7+
}
8+
9+
img {
10+
position: absolute;
11+
}
12+
13+
img:nth-child(odd) {
14+
transform: rotateY(180deg);
15+
}
16+
17+
img:nth-child(1),
18+
img:nth-child(2) {
19+
top: var(--vertical-offset--top-fish);
20+
}
21+
22+
img:nth-child(3),
23+
img:nth-child(4) {
24+
bottom: var(--vertical-offset--bottom-fish);
25+
}
26+
27+
img:nth-child(1) {
28+
left: var(--horizontal-offset--top-fish);
29+
}
30+
31+
img:nth-child(2) {
32+
right: var(--horizontal-offset--top-fish);
33+
}
34+
35+
img:nth-child(3) {
36+
left: var(--horizontal-offset--bottom-fish);
37+
}
38+
39+
img:nth-child(4) {
40+
right: var(--horizontal-offset--bottom-fish);
41+
}
42+
43+
h1,
44+
p {
45+
text-align: center;
46+
}

‎tutorials/css/positioning/absolute/css/variables.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
:root {
2+
--width--the-sea: 800px;
3+
--height--the-sea: 600px;
4+
--color-of-the-sky: hsl(190, 76%, 87%);
5+
--image-of-the-sea: url('../img/sea.png');
6+
--vertical-offset--top-fish: 200px;
7+
--horizontal-offset--top-fish: 120px;
8+
--vertical-offset--bottom-fish: 120px;
9+
--horizontal-offset--bottom-fish: 40px;
10+
}

‎tutorials/css/positioning/absolute/img/fish.png‎

4.07 KB
Loading

‎tutorials/css/positioning/absolute/img/sea.png‎

23.4 KB
Loading

‎tutorials/css/positioning/absolute/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Absolute Positioning</title>
6+
<link rel="stylesheet" href="css/variables.css">
7+
<link rel="stylesheet" href="css/style.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Absolute Positioning</h1>
12+
</header>
13+
<main>
14+
<div id="the-sea">
15+
<img src="img/fish.png" alt="[A goldfish]">
16+
<img src="img/fish.png" alt="[A goldfish]">
17+
<img src="img/fish.png" alt="[A goldfish]">
18+
<img src="img/fish.png" alt="[A goldfish]">
19+
</div>
20+
<p>Images: Lingfeng “Derek” Liu</p>
21+
</main>
22+
</body>
23+
</html>

0 commit comments

Comments
 (0)