我的代码有问题，非常感谢您的建议。我希望黄色方块保持在左边，像现在一样有自己的栏，但我希望方块在向下滚动时固定在屏幕上。每当我写入CCD_ 1或同时写入CCD_；在我的代码中，它接管并将所有内容合并为一列。
密码来了！
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>请注意，这个片段不会将其显示为position: sticky;，因为您添加了一个媒体查询，该查询会使元素更改其样式。