Div исчезает, когда установлено фиксированное положение

Question

У меня есть div с идентификатором sidemenu1, когда position ничего, кроме fixed видно, когда я меняю его на fixed, он становится скрытым, и я не могу его найти.

#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; 
} 

Это только в теле, контейнера нет. Я хочу, чтобы он следил за боком, пока я просматриваю оставшуюся часть документа.

Answer 1

Проблема заключается в том top: 100vh, когда вы установите position значение, отличное от значения по умолчанию static, что top вступает в силу, и 100vh означает 100% высоты окна просмотра.

Специально с position:fixed он также не будет запускать полосу прокрутки.

Answer 2

Если вы можете предоставить образец HTML и CSS может быть, я смогу помочь вам

Answer 3

Это то, что вы хотите, Райан?

#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>