Challenge: Master Sticky Positioning
Task
Create a blog layout for animal articles, ensuring that the corresponding animal photo is always visible while the user reads the article. When the user starts reading about another animal, offer the next animal photo. Steps:
Apply
stickypositioning to the element with the class nameillustration.Specify the position on the page where the element should become sticky.
index.html
index.css
99
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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="description">
<p class="text">
Kangaroos are marsupials native to Australia, known for their powerful
hind legs, long tails, and distinctive pouches in which they carry
their young. They are well-adapted to life in the harsh Australian
outback, where they use their legs to travel long distances and hop
with incredible speed and agility.
</p>
<p class="text">
Kangaroos are social animals, often living in groups called mobs or
troops. They communicate with each other using a variety of sounds and
body language, including growling, grunting, and thumping their feet.
</p>
<p class="text">
There are several different species of kangaroo, ranging in size from
the tiny musky rat-kangaroo, which is only about the size of a mouse,
to the red kangaroo, which is the largest marsupial in the world.
</p>
<p class="text">
While kangaroos are generally considered to be peaceful animals, they
can pose a danger to humans and pets if they feel threatened or
cornered. They have been known to attack people and dogs, using their
hind legs to deliver powerful kicks.
</p>
</div>
<div class="photo">
<img
class="illustration"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/positioning+section/kangaroo-challenge-example-v2.png"
alt="kangaroo"
width="128px"
/>
</div>
</div>
<div class="container">
<div class="description">
<p class="text">
Pandas are an iconic species native to China, known for their
distinctive black and white coloring, large round faces, and cuddly
appearance.
</p>
<p class="text">
Pandas are endangered, with only around 1,800 individuals left in the
wild. They face numerous threats, including habitat loss due to human
development, poaching, and a low reproductive rate.
</p>
<p class="text">
Pandas are a cultural symbol of China, and have been revered for
centuries. They feature prominently in Chinese art, literature, and
folklore, and are considered a national treasure.
</p>
<p class="text">
Pandas have unique physical and behavioral characteristics that make
them fascinating to study. For example, they have a "thumb" that is
actually an extension of their wrist bone, which they use to grasp
bamboo stalks.
</p>
</div>
<div class="photo">
<img
class="illustration"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/positioning+section/panda-challenge-example-v2.png"
alt="panda"
width="128px"
/>
</div>
</div>
</body>
</html>
99
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
.photo {
position: relative;
}
/* --------------- Make changes below this line --------------- */
.illustration {
position: ___;
___: ___;
}
/* --------------- Make changes above this line --------------- */
/* Not the current focus */
* {
box-sizing: border-box;
}
P {
margin-top: 0;
margin-bottom: 0;
}
.container {
margin: 0 auto;
padding: 15px;
border: 1px solid #322132;
display: flex;
}
.container:not(:last-child) {
margin-bottom: 40px;
}
.container:nth-child(2) {
display: flex;
flex-direction: row-reverse;
}
To make the animal illustrations stick to the top of the viewport while the user reads the article, apply the
stickypositioning to the element with the class nameillustration.Set the
topproperty to0to specify that the element should stick at the top of the viewport.
index.html
index.css
99
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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="description">
<p class="text">
Kangaroos are marsupials native to Australia, known for their powerful
hind legs, long tails, and distinctive pouches in which they carry
their young. They are well-adapted to life in the harsh Australian
outback, where they use their legs to travel long distances and hop
with incredible speed and agility.
</p>
<p class="text">
Kangaroos are social animals, often living in groups called mobs or
troops. They communicate with each other using a variety of sounds and
body language, including growling, grunting, and thumping their feet.
</p>
<p class="text">
There are several different species of kangaroo, ranging in size from
the tiny musky rat-kangaroo, which is only about the size of a mouse,
to the red kangaroo, which is the largest marsupial in the world.
</p>
<p class="text">
While kangaroos are generally considered to be peaceful animals, they
can pose a danger to humans and pets if they feel threatened or
cornered. They have been known to attack people and dogs, using their
hind legs to deliver powerful kicks.
</p>
</div>
<div class="photo">
<img
class="illustration"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/positioning+section/kangaroo-challenge-example-v2.png"
alt="kangaroo"
width="128px"
/>
</div>
</div>
<div class="container">
<div class="description">
<p class="text">
Pandas are an iconic species native to China, known for their
distinctive black and white coloring, large round faces, and cuddly
appearance.
</p>
<p class="text">
Pandas are endangered, with only around 1,800 individuals left in the
wild. They face numerous threats, including habitat loss due to human
development, poaching, and a low reproductive rate.
</p>
<p class="text">
Pandas are a cultural symbol of China, and have been revered for
centuries. They feature prominently in Chinese art, literature, and
folklore, and are considered a national treasure.
</p>
<p class="text">
Pandas have unique physical and behavioral characteristics that make
them fascinating to study. For example, they have a "thumb" that is
actually an extension of their wrist bone, which they use to grasp
bamboo stalks.
</p>
</div>
<div class="photo">
<img
class="illustration"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/advanced+css+techniques/positioning+section/panda-challenge-example-v2.png"
alt="panda"
width="128px"
/>
</div>
</div>
</body>
</html>
99
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
.photo {
position: relative;
}
.illustration {
position: sticky;
top: 0px;
}
/* Not the current focus */
* {
box-sizing: border-box;
}
P {
margin-top: 0;
margin-bottom: 0;
}
.container {
margin: 0 auto;
padding: 15px;
border: 1px solid #322132;
display: flex;
}
.container:not(:last-child) {
margin-bottom: 40px;
}
.container:nth-child(2) {
display: flex;
flex-direction: row-reverse;
}
.description,
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 2. Capítulo 9
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
