Herausforderung: Sticky Positionierung
Aufgabe
Erstellen Sie ein Blog-Layout für Tierartikel, bei dem das entsprechende Tierfoto immer sichtbar ist, während der Benutzer den Artikel liest. Wenn der Benutzer beginnt, über ein anderes Tier zu lesen, bieten Sie das nächste Tierfoto an. Schritte:
Wenden Sie
sticky-Positionierung auf das Element mit dem Klassennamenillustrationan.Geben Sie die Position auf der Seite an, an der das Element sticky werden soll.
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;
}
Um die Tierillustrationen oben im Ansichtsfenster zu fixieren, während der Benutzer den Artikel liest, wenden Sie die
sticky-Positionierung auf das Element mit dem Klassennamenillustrationan.Setzen Sie die
top-Eigenschaft auf0, um anzugeben, dass das Element oben im Ansichtsfenster fixiert werden soll.
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,
War alles klar?
Danke für Ihr Feedback!
Abschnitt 2. Kapitel 9
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
