Div verschwindet, wenn auf feste Position gesetzt

Question

Ich habe ein div mit einer ID von sidemenu1, wenn position ist alles andere als fixed ist es sichtbar, wenn ich es zu fixed ändern wird es versteckt und ich kann es nicht finden.

#sidemenu1 { 
    height: 100%; 
    width: 150px; 
    left: 10px; 
    top: 100vh; 
    background-color: aliceblue; 
    float: left; 
    position: fixed; 
    z-index: 30; 
    animation-name: sidemenuanimation; 
    animation-play-state: paused; 
    animation-fill-mode: forwards; 
    animation-duration: 4s; 
} 

Es ist nur im Körper, gibt es keine Container. Ich möchte, dass es auf der Seite fixiert bleibt, während ich den Rest des Dokuments durchblättere.

Answer 1

Das Problem ist top: 100vh, wenn Sie position anderen Wert als der Standard static gesetzt, dass top wirksam wird, und 100vh bedeutet 100% des Darstellungshöhe.

Insbesondere mit position:fixed wird auch nicht die Bildlaufleiste ausgelöst.

Answer 2

Wenn Sie die Probe html und CSS bieten könnte vielleicht kann ich Ihnen helfen

Answer 3

Ist das, was Sie wollen, Ryan?

#sidemenu1 { 
 
      height: 15px; 
 
      width: 150px; 
 
      left: 10px; 
 
      background-color: aliceblue; 
 
      float: left; 
 
      position: fixed; 
 
      z-index: 30; 
 
      animation-name: sidemenuanimation; 
 
      animation-play-state: paused; 
 
      animation-fill-mode: forwards; 
 
      animation-duration: 4s; 
 
     } 
 

 
     #fixedbox{ 
 
      height: 200px; 
 
      width: 150px; 
 
      background-color: forestgreen; 
 
      float: left; 
 
      position: fixed; 
 
      z-index: 400; 
 
      overflow:auto 
 
     }

<div id="fixedbox"> 
 
    <div id="sidemenu1">dsfasgsagsagasdg</div>  
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
     sadasdsa</br> 
 
    </div>