CSS粘贴不在侧边栏中工作

Question

有人可以告诉我为什么#sidebar不会粘在这个代码上吗？当我在main #searchbar和#localnav上测试粘性属性时，它可以正常工作，但不能在#sidebar上。我已经测试过将padding-bottom添加到侧边栏，主要用于测试是否应该有帮助，但事实并非如此。

请参阅代码段。

@charset "UTF-8";

/* CSS Document */


/* ----- Förberedande stilar ----- */


/* Samma utgångsvärde för struktur/layout-elementen för alla webbläsare */

html,
body,
div,
header,
nav,
main,
article,
section,
aside,
footer {
  margin: 0;
  padding: 0;
}


/* Om äldre webbläsaren inte förstår taggen så visa den som block istället för inline  */

header,
nav,
main,
article,
aside,
footer,
section {
  display: block;
}

html {
  -webkit-text-size-adjust: 100%;
}


/*Så att Safari i iPhone inte skalar om texten */


/* ----- Layout ----- */

body {
  background-image: url("pics/leonardo-da-vinci.jpg");
  color: #000;
  font-family: Verdana, sans-serif;
}

#wrapper {
  width: 1000px;
  margin: 10px auto;
  background-color: #ffffff;
  box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69);
}


/*positionering*/

main {
  margin-left: 20%;
}

#localnav {
  float: left;
  width: 20%;
}

article {
  width: 62.8%;
  float: left;
  background-color: #e7e3e3;
  padding: 0.9em;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69)
}

.sidebar {
  width: 30%;
  float: right;
}

.sidebar section {
  background-color: #379013;
  color: #fff;
  padding: 0.9em;
  margin-bottom: 1em;
  border-bottom-left-radius: 20px;
  box-shadow: -7px 7px 7px rgba(42, 56, 28, 0.69);
}

section a {
  text-decoration: none;
}

section a {
  padding: 0.5em;
}

section a:link,
section a:visited {
  color: #fff;
}

section a:hover,
section a:active {
  color: #0e2a05;
}

#searchbar {
  padding: 0.5em;
  margin-bottom: 0.5em;
  text-align: center;
}


/* #searchbar form {
    display: inline-block;
    text-align: center;
} */

#searchbar input {
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid green;
  border-radius: 4px;
  font-size: 1.1em;
}

#searchbar input[type="text"] {
  width: 40%;
}

#globalnav {
  border-bottom: solid;
  padding-bottom: 0.5em;
  font-size: 1.5em;
}

#globalnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#globalnav ul li {
  display: inline;
}

#globalnav a {
  text-decoration: none;
  padding: 0.5em;
  color: #267d0c;
}

#localnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#localnav ul li {
  display: block;
  position: relative;
  margin-top: 1em;
  margin-right: 110px;
}

#localnav a {
  text-decoration: none;
  padding: 0.5em;
  padding-right: 1em;
  font-size: 1.5em;
}

#localnav a:link,
#localnav a:visited {
  color: #666;
}

#localnav a:hover,
#localnav a:active {
  background-color: #267d0c;
  color: #ffffff;
}

.thisSection {
  background-color: #b9f0aa;
  color: #000;
  border-top-right-radius: 25px;
}

#localnav ul li ul {
  background-color: #b9f0aa;
  border: 1px solid #333;
  box-shadow: 3px 3px 3px #666;
  position: absolute;
  top: -0.7em;
  left: 5em;
  visibility: hidden;
}

#localnav ul li:hover ul {
  visibility: visible;
}

#localnav ul li ul li {
  display: block;
  width: 100%;
  white-space: nowrap;
  margin-top: auto;
}

#localnav ul li ul li a {
  display: block;
  padding: 0.5em;
}

#localnav ul li ul li a:hover {
  background-color: #267d0c;
  color: #FFF;
}

#localnav #thisPage:before {
  content: "> ";
}

#localnav {
  padding-bottom: 0.5em;
}

main p {
  text-align: justify;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

main {
  overflow: visible;
}

img {
  max-width: 100%;
  height: auto;
}


/*flexibla bilder som justeras efter skärmstorlek, höjden justeras efter bredden för att behålla proportionerna */

article img {
  float: right;
}

header img {
  width: 200px;
  float: left;
  border-radius: 50%;
}

header {
  height: 133px;
  padding-bottom: 2em;
  padding-top: 2em;
  margin-left: 1em;
  position: relative;
}

header h1 {
  position: absolute;
  top: 1em;
  right: 12em;
}

header h2 {
  position: absolute;
  top: 4em;
  right: 6em;
}

header h1,
header h2 {
  font-style: italic;
  font-weight: bold;
  text-shadow: 3px 3px 5px green;
}

footer {
  border-top: solid;
  padding: 1em;
  clear: both;
}

<div id="wrapper">
  <header>
    <a href="index.htm"><img src="pics/logo.jpg" alt="logo"></a>
    <h1>Fysiohjälpen</h1>
    <h2>Snabbt och enkelt att hitta informationen du söker</h2>
  </header>

  <div id="searchbar">
    <form class="" action="" method="post">
      <input type="text" name="search" placeholder="Hitta information om symtom, behandling..."><input type="button" name="" value="Sök">
    </form>
  </div>

  <nav id="globalnav">
    <ul>
      <li><a href="index.htm" class="thisSection">Handbok</a></li>
      <li><a href="#">Länkar</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </nav>
  <nav id="localnav">
    <ul>
      <li><a href="#" class="thisSection">Rygg</a>
        <ul>
          <li><a href="#" id="thisPage">Diskbråck</a></li>
          <li><a href="#">Spinal stenos</a></li>
          <li><a href="#">Skolios</a></li>
        </ul>
      </li>
      <li><a href="#">Knä</a>
        <ul>
          <li><a href="#">Artros</a></li>
          <li><a href="#">Korsbandsskada</a></li>
        </ul>
      </li>
      <li><a href="#">Axel</a>
        <ul>
          <li><a href="#">Impingement</a></li>
          <li><a href="#">Instabila axeln</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <main>
    <article>
      <h2>Om diskbråck</h2>
      <img src="pics/disc.png" alt="ryggraden">
      <h3 id="symtom">Symtom</h3>
      <p>Ett cervikalt diskbråck är en utbuktning av nucleus puposus genom ett brott i anulus fibrosus i en disk i nacken. Cervikal radikulopati är ett neurologiskt tillstånd som kännetecknas av dysfunktion av en cervikal spinalnerv, rötterna till nerven,
        eller båda. Flertalet patienter med symtomgivande cervikalt diskbråck har smärtor och/eller domningar som följer berörda myotom respektive dermatom. </p>
      <h3 id="behandling">Behandling</h3>
      <p>Undvik aktiviteter som ökar trycket i disken, det vill säga undvik aktiviteter som utlöser smärtor: Löpning, hoppning och liknande avrådes ifrån. Ensidiga ställningar av nacke och rygg bör undvikas</p>
      <p>Övningar i form av rörelseträning, styrkeövningar och aerobiska övningar används ofta vid cervikal radikulopati.</p>
      <h3 id="patientinformation">Patientinformation</h3>
      <p>Slitage eller skada på diskarna i nacken kan leda till ett diskbråck som trycker mot nerver som utgår från halsryggraden. Konsekvensen kan bli utstrålande smärtor i en arm och/eller nedsatt kraft i armen. I de flesta fall går bråcket tillbaka.</p>
      <p>De flesta som har diskbråck i nacken blir bra utan behandling. Visserligen kan besvären komma och gå, men hos många är obehaget plågsamt under en period för att senare aldrig komma tillbaka.</p>
      <p>Många klarar sig bra med milda smärtstillande läkemedel vid besvär. Ibland kan det vara aktuellt att använda starkare smärtstillande eller inflammationshämmande läkemedel (NSAID), som dämpar irritationen runt diskbråcket. Svullnaden går ned och
        det blir mer utrymme runt vävnaden. Diskbråcket trycker mindre på andra strukturer. Nackdelen med NSAID är att många får magbesvär av dem.</p>
      <p>Behandlingen beror på hur stort diskbråcket är. För de flesta gäller det att behandla sig själv genom att till exempel undvika aktiviteter som belastar nacken mycket. En bra regel är att inte göra saker som ger smärtor. Löpning, hoppning och liknande
        är det bra att vara försiktig med i början. Detsamma gäller ensidiga ställningar i nacke och rygg.</p>
      <h3 id="referenser">Referenser</h3>
      <p>Carette S and Fehlings MG. Cervical radiculopathy. N Engl J Med 2005; 353: 392-9.</p>
      <p>Eubanks JD. Cervical radiculopathy: Nonoperative management of neck pain and radicular symptoms. Am Fam Physician 2010; 81: 33-40.</p>

    </article>
    <div class="sidebar sticky">
      <section>
        <h2>Genväg till innehåll</h2>
        <nav id="articlemenu">
          <ul>
            <li><a href="#symtom">Symtom</a></li>
            <li><a href="#behandling">Behandling</a></li>
            <li><a href="#patientinformation">Patientinformation</a></li>
            <li><a href="#referenser">Referenser</a></li>
          </ul>
        </nav>
      </section>
    </div>
  </main>

  <footer>
    &copy; Tobias Andersson 2018-03-04
  </footer>
</div>
<!-- End wrapper -->

Answer 1

好position: sticky在其父元素的height内工作，而您的sticky定位div的父main由于内部浮动的div而没有任何高度，这就是为什么{{ 1}}不工作......

因此，尝试使用position:sticky伪元素

在浮动div之后放置一个in-flow元素

:after

main:after {
  content: "";
  display: table;
  clear: both;
}

html,
body,
div,
header,
nav,
main,
article,
section,
aside,
footer {
  margin: 0;
  padding: 0;
}

header,
nav,
main,
article,
aside,
footer,
section {
  display: block;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-image: url("pics/leonardo-da-vinci.jpg");
  color: #000;
  font-family: Verdana, sans-serif;
}

#wrapper {
  width: 1000px;
  margin: 10px auto;
  background-color: #ffffff;
  box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69);
}

main {
  margin-left: 20%;
}

#localnav {
  float: left;
  width: 20%;
}

article {
  width: 62.8%;
  float: left;
  background-color: #e7e3e3;
  padding: 0.9em;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69)
}

.sidebar {
  width: 30%;
  float: right;
}

.sidebar section {
  background-color: #379013;
  color: #fff;
  padding: 0.9em;
  margin-bottom: 1em;
  border-bottom-left-radius: 20px;
  box-shadow: -7px 7px 7px rgba(42, 56, 28, 0.69);
}

section a {
  text-decoration: none;
}

section a {
  padding: 0.5em;
}

section a:link,
section a:visited {
  color: #fff;
}

section a:hover,
section a:active {
  color: #0e2a05;
}

#searchbar {
  padding: 0.5em;
  margin-bottom: 0.5em;
  text-align: center;
}

#searchbar input {
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid green;
  border-radius: 4px;
  font-size: 1.1em;
}

#searchbar input[type="text"] {
  width: 40%;
}

#globalnav {
  border-bottom: solid;
  padding-bottom: 0.5em;
  font-size: 1.5em;
}

#globalnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#globalnav ul li {
  display: inline;
}

#globalnav a {
  text-decoration: none;
  padding: 0.5em;
  color: #267d0c;
}

#localnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#localnav ul li {
  display: block;
  position: relative;
  margin-top: 1em;
  margin-right: 110px;
}

#localnav a {
  text-decoration: none;
  padding: 0.5em;
  padding-right: 1em;
  font-size: 1.5em;
}

#localnav a:link,
#localnav a:visited {
  color: #666;
}

#localnav a:hover,
#localnav a:active {
  background-color: #267d0c;
  color: #ffffff;
}

.thisSection {
  background-color: #b9f0aa;
  color: #000;
  border-top-right-radius: 25px;
}

#localnav ul li ul {
  background-color: #b9f0aa;
  border: 1px solid #333;
  box-shadow: 3px 3px 3px #666;
  position: absolute;
  top: -0.7em;
  left: 5em;
  visibility: hidden;
}

#localnav ul li:hover ul {
  visibility: visible;
}

#localnav ul li ul li {
  display: block;
  width: 100%;
  white-space: nowrap;
  margin-top: auto;
}

#localnav ul li ul li a {
  display: block;
  padding: 0.5em;
}

#localnav ul li ul li a:hover {
  background-color: #267d0c;
  color: #FFF;
}

#localnav #thisPage:before {
  content: "> ";
}

#localnav {
  padding-bottom: 0.5em;
}

main p {
  text-align: justify;
}

div.sticky {
  position: sticky;
  top: 0;
}

main:after {
  content: "";
  display: table;
  clear: both;
}

img {
  max-width: 100%;
  height: auto;
}

article img {
  float: right;
}

header img {
  width: 200px;
  float: left;
  border-radius: 50%;
}

header {
  height: 133px;
  padding-bottom: 2em;
  padding-top: 2em;
  margin-left: 1em;
  position: relative;
}

header h1 {
  position: absolute;
  top: 1em;
  right: 12em;
}

header h2 {
  position: absolute;
  top: 4em;
  right: 6em;
}

header h1,
header h2 {
  font-style: italic;
  font-weight: bold;
  text-shadow: 3px 3px 5px green;
}

footer {
  border-top: solid;
  padding: 1em;
  clear: both;
}