在侧面滚动时，如何使盒子保持固定，同时保持其位置？
How do I make the box stay fixed while keeping it's position when scrolling on the side?
我的代码有问题，非常感谢您的建议。我希望黄色方块保留在左侧，像现在一样拥有自己的列，但我希望在向下滚动时将方块固定在屏幕上。每次我在代码中写 position:fixed 或同时写 position:left:fixed;" 时，它都会接管并将所有内容融合到一列中。
代码来了！
html {
background-color: blue;
color: pink;
}
a {
color: yellow;
}
a:hover {
color: red;
}
.uppe {
position: static;
width: 20%;
}
#bild {
float: left;
}
#rubrik {
float: left;
}
main {
float: left;
width: 100%;
}
.kolumn {
float: left;
width: 25%;
color: orange;
border: solid;
border-color: yellow;
margin: 10px;
}
.kolumn1 {
float: left;
width: 40%;
color: purple;
background-color: orange
}
.nere {
float: left;
}
@media screen and (max-width:700px) {
html {
/*column-count:1;*/
width: 100%;
}
.uppe {
position: static;
width: 100%;
}
.kolumn {
position: static;
width: 100%;
}
.kolumn1 {
position: static;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Embla Olsson+startsida </title>
</head>
<body>
<header class="uppe">
<figure>
<img id="bild" src="OlssonEmbla/Bild01.png" title="cirkelmedmåneochsol" alt="enbildpåencirkelmedhalvasoligochhalvamolnig" height="100" width="100" />
</figure>
<h1 id="rubrik"> Startsida </h1>
</header>
<main>
<nav class="kolumn">
<p>
<a href="#Enigma">Dikten</a> <br/>
<a href="#Shadow">Första texten</a> <br/>
<a href="#APredicament">Andra texten</a> <br/>
</p>
</nav>
<div class="kolumn1">
<section>
<h2> Länkar till hemsidor </h2>
</section>
<nav>
<a id="Enigma" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+startsida.html">Eligma</a>
<p> Denna länk länkar till en dikt av Edgar Allan Poe. Dikten heter "Enigma" och är som de flesta dikter väldigt kort. På <i> Read Vine </i> beskriver man dikten såhär "Edgar Allan Poe wrote several poems that contained a secret. An Enigma is one
of those poems. Enigma means puzzle or mystery. There is a woman's name hidden in the text. To find her name, use the first letter of the first line, the second letter of the second line, the third letter of the third line, and so on. </p> <br/>
<a id="Shadow" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+shadow.html">Shadaow</a>
<p> Denna länk länkar till texten "Shadow" skriven av Edgar Allan Poe. Och som den latmask man är så kommer jag citera <i> Wikipedias </i> sammanfattning av texten "The Poe Shadow is a novel by Matthew Pearl, first published by Random House in 2006.
It tells the story of one young lawyer's quest to solve the mystery of Edgar Allan Poe's death in 1849." Och eftersom <i> Oldstyle Tales Press </i> gjort en så bra beskrivning slänger jag in den också här! Citeringen lyder "In “Shadow – A Parable”
these ideas are consolidated into a nearly Homeric meditation on death's invincibility. The story of a mere moment, “Shadow” peeks into the room where seven men are nervously peering into their own reflections while a gruesome plague ravishes
the streets beyond their fastened brass door." </p> <br/>
<a id="APredicament" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+A%20Predicament.html">A Predicament</a>
<p> Denna länk länkar till texten "A Predicament" av Edgar Allan Poe. Även här citerar jag vår kära vän <i> Wikipedia </i> ""A Predicament" is a humorous short story by Edgar Allan Poe, usually combined with its companion piece "How to Write a Blackwood
Article". It was originally titled "The Scythe of Time". The paired stories parody the Gothic sensation tale, popular in England and America since the early 19th century.". Såhär skulle även <i> Wikipedia </i> summera texten "The bizarre story
follows a female narrator, Signora Psyche Zenobia. While walking through "the goodly city of Edina" with her 5-inch-tall (130 mm) poodle and her 3-foot-tall (0.91 m) black servant, Pompey, she is drawn to a large Gothic cathedral. At the steeple,
Zenobia sees a small opening she wishes to look through. Standing on Pompey's shoulders, she pushes her head through the opening, realizing she is in the face of a giant clock. As she gazes out at the city beyond, she soon finds that the sharp
minute hand has begun to dig into her neck. Slowly, the minute hand decapitates her. At one point, pressure against her neck causes her eye to fall and roll down into the gutter and then to the street below. Her other eye follows thereafter.
Finally, the clock has fully severed her head from her body. She does not express despair and is, in fact, glad to be rid of it. For a moment, she wonders which is the real Zenobia: her headless body or her severed head. The head then gives
a heroic speech which Zenobia's body cannot hear because it has no ears. Her narration continues without her head, as she is now able to step down from her predicament. In fear Pompey runs off, and Zenobia sees that a rat has eaten her poodle."
</p> <br/>
</nav>
</div>
</main>
<footer class="nere">
Embla Cecilia :) <br/>
</footer>
</body>
</html>
问题在于，当您使用 position: fixed; 时，元素不再相对于容器，而是相对于页面，换句话说，绝对定位。这使得它出现在第二个 div 的顶部。解决方案是你可以使用 position: sticky; 代替..外观有点不同......
html {
background-color: blue;
color: pink;
}
a {
color: yellow;
}
a:hover {
color: red;
}
.uppe {
position: static;
width: 20%;
}
#bild {
float: left;
}
#rubrik {
float: left;
}
main {
float: left;
width: 100%;
}
.kolumn {
float: left;
width: 25%;
color: orange;
border: solid;
border-color: yellow;
margin: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px !important;
/*Needs to be there to work position: sticky;*/
}
.kolumn1 {
float: left;
width: 40%;
color: purple;
background-color: orange
}
.nere {
float: left;
}
@media screen and (max-width:700px) {
html {
/*column-count:1;*/
width: 100%;
}
.uppe {
position: static;
width: 100%;
}
.kolumn {
position: static;
width: 100%;
}
.kolumn1 {
position: static;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Embla Olsson+startsida </title>
</head>
<body>
<header class="uppe">
<figure>
<img id="bild" src="OlssonEmbla/Bild01.png" title="cirkelmedmåneochsol" alt="enbildpåencirkelmedhalvasoligochhalvamolnig" height="100" width="100" />
</figure>
<h1 id="rubrik"> Startsida </h1>
</header>
<main>
<nav class="kolumn">
<p>
<a href="#Enigma">Dikten</a> <br/>
<a href="#Shadow">Första texten</a> <br/>
<a href="#APredicament">Andra texten</a> <br/>
</p>
</nav>
<div class="kolumn1">
<section>
<h2> Länkar till hemsidor </h2>
</section>
<nav>
<a id="Enigma" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+startsida.html">Eligma</a>
<p> Denna länk länkar till en dikt av Edgar Allan Poe. Dikten heter "Enigma" och är som de flesta dikter väldigt kort. På <i> Read Vine </i> beskriver man dikten såhär "Edgar Allan Poe wrote several poems that contained a secret. An Enigma is one
of those poems. Enigma means puzzle or mystery. There is a woman's name hidden in the text. To find her name, use the first letter of the first line, the second letter of the second line, the third letter of the third line, and so on. </p> <br/>
<a id="Shadow" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+shadow.html">Shadaow</a>
<p> Denna länk länkar till texten "Shadow" skriven av Edgar Allan Poe. Och som den latmask man är så kommer jag citera <i> Wikipedias </i> sammanfattning av texten "The Poe Shadow is a novel by Matthew Pearl, first published by Random House in 2006.
It tells the story of one young lawyer's quest to solve the mystery of Edgar Allan Poe's death in 1849." Och eftersom <i> Oldstyle Tales Press </i> gjort en så bra beskrivning slänger jag in den också här! Citeringen lyder "In “Shadow – A Parable”
these ideas are consolidated into a nearly Homeric meditation on death's invincibility. The story of a mere moment, “Shadow” peeks into the room where seven men are nervously peering into their own reflections while a gruesome plague ravishes
the streets beyond their fastened brass door." </p> <br/>
<a id="APredicament" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+A%20Predicament.html">A Predicament</a>
<p> Denna länk länkar till texten "A Predicament" av Edgar Allan Poe. Även här citerar jag vår kära vän <i> Wikipedia </i> ""A Predicament" is a humorous short story by Edgar Allan Poe, usually combined with its companion piece "How to Write a Blackwood
Article". It was originally titled "The Scythe of Time". The paired stories parody the Gothic sensation tale, popular in England and America since the early 19th century.". Såhär skulle även <i> Wikipedia </i> summera texten "The bizarre story
follows a female narrator, Signora Psyche Zenobia. While walking through "the goodly city of Edina" with her 5-inch-tall (130 mm) poodle and her 3-foot-tall (0.91 m) black servant, Pompey, she is drawn to a large Gothic cathedral. At the steeple,
Zenobia sees a small opening she wishes to look through. Standing on Pompey's shoulders, she pushes her head through the opening, realizing she is in the face of a giant clock. As she gazes out at the city beyond, she soon finds that the sharp
minute hand has begun to dig into her neck. Slowly, the minute hand decapitates her. At one point, pressure against her neck causes her eye to fall and roll down into the gutter and then to the street below. Her other eye follows thereafter.
Finally, the clock has fully severed her head from her body. She does not express despair and is, in fact, glad to be rid of it. For a moment, she wonders which is the real Zenobia: her headless body or her severed head. The head then gives
a heroic speech which Zenobia's body cannot hear because it has no ears. Her narration continues without her head, as she is now able to step down from her predicament. In fear Pompey runs off, and Zenobia sees that a rat has eaten her poodle."
</p> <br/>
</nav>
</div>
</main>
<footer class="nere">
Embla Cecilia :) <br/>
</footer>
</body>
</html>
P.S。此代码段不会将其显示为 position: sticky;，因为您添加了媒体查询，使元素更改其样式。
我的代码有问题，非常感谢您的建议。我希望黄色方块保留在左侧，像现在一样拥有自己的列，但我希望在向下滚动时将方块固定在屏幕上。每次我在代码中写 position:fixed 或同时写 position:left:fixed;" 时，它都会接管并将所有内容融合到一列中。
代码来了！
html {
background-color: blue;
color: pink;
}
a {
color: yellow;
}
a:hover {
color: red;
}
.uppe {
position: static;
width: 20%;
}
#bild {
float: left;
}
#rubrik {
float: left;
}
main {
float: left;
width: 100%;
}
.kolumn {
float: left;
width: 25%;
color: orange;
border: solid;
border-color: yellow;
margin: 10px;
}
.kolumn1 {
float: left;
width: 40%;
color: purple;
background-color: orange
}
.nere {
float: left;
}
@media screen and (max-width:700px) {
html {
/*column-count:1;*/
width: 100%;
}
.uppe {
position: static;
width: 100%;
}
.kolumn {
position: static;
width: 100%;
}
.kolumn1 {
position: static;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Embla Olsson+startsida </title>
</head>
<body>
<header class="uppe">
<figure>
<img id="bild" src="OlssonEmbla/Bild01.png" title="cirkelmedmåneochsol" alt="enbildpåencirkelmedhalvasoligochhalvamolnig" height="100" width="100" />
</figure>
<h1 id="rubrik"> Startsida </h1>
</header>
<main>
<nav class="kolumn">
<p>
<a href="#Enigma">Dikten</a> <br/>
<a href="#Shadow">Första texten</a> <br/>
<a href="#APredicament">Andra texten</a> <br/>
</p>
</nav>
<div class="kolumn1">
<section>
<h2> Länkar till hemsidor </h2>
</section>
<nav>
<a id="Enigma" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+startsida.html">Eligma</a>
<p> Denna länk länkar till en dikt av Edgar Allan Poe. Dikten heter "Enigma" och är som de flesta dikter väldigt kort. På <i> Read Vine </i> beskriver man dikten såhär "Edgar Allan Poe wrote several poems that contained a secret. An Enigma is one
of those poems. Enigma means puzzle or mystery. There is a woman's name hidden in the text. To find her name, use the first letter of the first line, the second letter of the second line, the third letter of the third line, and so on. </p> <br/>
<a id="Shadow" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+shadow.html">Shadaow</a>
<p> Denna länk länkar till texten "Shadow" skriven av Edgar Allan Poe. Och som den latmask man är så kommer jag citera <i> Wikipedias </i> sammanfattning av texten "The Poe Shadow is a novel by Matthew Pearl, first published by Random House in 2006.
It tells the story of one young lawyer's quest to solve the mystery of Edgar Allan Poe's death in 1849." Och eftersom <i> Oldstyle Tales Press </i> gjort en så bra beskrivning slänger jag in den också här! Citeringen lyder "In “Shadow – A Parable”
these ideas are consolidated into a nearly Homeric meditation on death's invincibility. The story of a mere moment, “Shadow” peeks into the room where seven men are nervously peering into their own reflections while a gruesome plague ravishes
the streets beyond their fastened brass door." </p> <br/>
<a id="APredicament" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+A%20Predicament.html">A Predicament</a>
<p> Denna länk länkar till texten "A Predicament" av Edgar Allan Poe. Även här citerar jag vår kära vän <i> Wikipedia </i> ""A Predicament" is a humorous short story by Edgar Allan Poe, usually combined with its companion piece "How to Write a Blackwood
Article". It was originally titled "The Scythe of Time". The paired stories parody the Gothic sensation tale, popular in England and America since the early 19th century.". Såhär skulle även <i> Wikipedia </i> summera texten "The bizarre story
follows a female narrator, Signora Psyche Zenobia. While walking through "the goodly city of Edina" with her 5-inch-tall (130 mm) poodle and her 3-foot-tall (0.91 m) black servant, Pompey, she is drawn to a large Gothic cathedral. At the steeple,
Zenobia sees a small opening she wishes to look through. Standing on Pompey's shoulders, she pushes her head through the opening, realizing she is in the face of a giant clock. As she gazes out at the city beyond, she soon finds that the sharp
minute hand has begun to dig into her neck. Slowly, the minute hand decapitates her. At one point, pressure against her neck causes her eye to fall and roll down into the gutter and then to the street below. Her other eye follows thereafter.
Finally, the clock has fully severed her head from her body. She does not express despair and is, in fact, glad to be rid of it. For a moment, she wonders which is the real Zenobia: her headless body or her severed head. The head then gives
a heroic speech which Zenobia's body cannot hear because it has no ears. Her narration continues without her head, as she is now able to step down from her predicament. In fear Pompey runs off, and Zenobia sees that a rat has eaten her poodle."
</p> <br/>
</nav>
</div>
</main>
<footer class="nere">
Embla Cecilia :) <br/>
</footer>
</body>
</html>
问题在于，当您使用 position: fixed; 时，元素不再相对于容器，而是相对于页面，换句话说，绝对定位。这使得它出现在第二个 div 的顶部。解决方案是你可以使用 position: sticky; 代替..外观有点不同......
html {
background-color: blue;
color: pink;
}
a {
color: yellow;
}
a:hover {
color: red;
}
.uppe {
position: static;
width: 20%;
}
#bild {
float: left;
}
#rubrik {
float: left;
}
main {
float: left;
width: 100%;
}
.kolumn {
float: left;
width: 25%;
color: orange;
border: solid;
border-color: yellow;
margin: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px !important;
/*Needs to be there to work position: sticky;*/
}
.kolumn1 {
float: left;
width: 40%;
color: purple;
background-color: orange
}
.nere {
float: left;
}
@media screen and (max-width:700px) {
html {
/*column-count:1;*/
width: 100%;
}
.uppe {
position: static;
width: 100%;
}
.kolumn {
position: static;
width: 100%;
}
.kolumn1 {
position: static;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Embla Olsson+startsida </title>
</head>
<body>
<header class="uppe">
<figure>
<img id="bild" src="OlssonEmbla/Bild01.png" title="cirkelmedmåneochsol" alt="enbildpåencirkelmedhalvasoligochhalvamolnig" height="100" width="100" />
</figure>
<h1 id="rubrik"> Startsida </h1>
</header>
<main>
<nav class="kolumn">
<p>
<a href="#Enigma">Dikten</a> <br/>
<a href="#Shadow">Första texten</a> <br/>
<a href="#APredicament">Andra texten</a> <br/>
</p>
</nav>
<div class="kolumn1">
<section>
<h2> Länkar till hemsidor </h2>
</section>
<nav>
<a id="Enigma" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+startsida.html">Eligma</a>
<p> Denna länk länkar till en dikt av Edgar Allan Poe. Dikten heter "Enigma" och är som de flesta dikter väldigt kort. På <i> Read Vine </i> beskriver man dikten såhär "Edgar Allan Poe wrote several poems that contained a secret. An Enigma is one
of those poems. Enigma means puzzle or mystery. There is a woman's name hidden in the text. To find her name, use the first letter of the first line, the second letter of the second line, the third letter of the third line, and so on. </p> <br/>
<a id="Shadow" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+shadow.html">Shadaow</a>
<p> Denna länk länkar till texten "Shadow" skriven av Edgar Allan Poe. Och som den latmask man är så kommer jag citera <i> Wikipedias </i> sammanfattning av texten "The Poe Shadow is a novel by Matthew Pearl, first published by Random House in 2006.
It tells the story of one young lawyer's quest to solve the mystery of Edgar Allan Poe's death in 1849." Och eftersom <i> Oldstyle Tales Press </i> gjort en så bra beskrivning slänger jag in den också här! Citeringen lyder "In “Shadow – A Parable”
these ideas are consolidated into a nearly Homeric meditation on death's invincibility. The story of a mere moment, “Shadow” peeks into the room where seven men are nervously peering into their own reflections while a gruesome plague ravishes
the streets beyond their fastened brass door." </p> <br/>
<a id="APredicament" href="file:///C:/Users/Embla%20Olsson/Documents/Webbutveckling%201/Embla%20Olsson+A%20Predicament.html">A Predicament</a>
<p> Denna länk länkar till texten "A Predicament" av Edgar Allan Poe. Även här citerar jag vår kära vän <i> Wikipedia </i> ""A Predicament" is a humorous short story by Edgar Allan Poe, usually combined with its companion piece "How to Write a Blackwood
Article". It was originally titled "The Scythe of Time". The paired stories parody the Gothic sensation tale, popular in England and America since the early 19th century.". Såhär skulle även <i> Wikipedia </i> summera texten "The bizarre story
follows a female narrator, Signora Psyche Zenobia. While walking through "the goodly city of Edina" with her 5-inch-tall (130 mm) poodle and her 3-foot-tall (0.91 m) black servant, Pompey, she is drawn to a large Gothic cathedral. At the steeple,
Zenobia sees a small opening she wishes to look through. Standing on Pompey's shoulders, she pushes her head through the opening, realizing she is in the face of a giant clock. As she gazes out at the city beyond, she soon finds that the sharp
minute hand has begun to dig into her neck. Slowly, the minute hand decapitates her. At one point, pressure against her neck causes her eye to fall and roll down into the gutter and then to the street below. Her other eye follows thereafter.
Finally, the clock has fully severed her head from her body. She does not express despair and is, in fact, glad to be rid of it. For a moment, she wonders which is the real Zenobia: her headless body or her severed head. The head then gives
a heroic speech which Zenobia's body cannot hear because it has no ears. Her narration continues without her head, as she is now able to step down from her predicament. In fear Pompey runs off, and Zenobia sees that a rat has eaten her poodle."
</p> <br/>
</nav>
</div>
</main>
<footer class="nere">
Embla Cecilia :) <br/>
</footer>
</body>
</html>
P.S。此代码段不会将其显示为 position: sticky;，因为您添加了媒体查询，使元素更改其样式。