po dodaniu sticky div się chowa

Question

Po dodaniu sticky, close-section chowa się pod innymi elementaki, normalnie wygląda to tak jak na zdjęciu poniżej

.modal-btn {
  border: none;
  border-top-left-radius: 3px;
  background-color: #0f0f0f;
  width: 55px;
  height: 35px;
  outline: none;
  cursor: pointer;
  color: rgb(180, 180, 180);
  transform: translate(0%, -1050%);
}

.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s;
}

.bg-active {
  visibility: visible;
  opacity: 1;
}

.modal {
  background-color: #141414;
  width: 340px;
  height: 462px;
  min-height: 462px;
  display: flex;
  align-items: center;
  flex-direction: column;
  transform: translate(6%, -6%);
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  font-weight: bold ;
  cursor: pointer;
  text-shadow: 0px 0px 2px #fff;
}

.close-section {
  width: 340px;
  height: 35px;
  background-color: #080808;
  box-shadow: 0px 1px 3px #080808;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.sections {
  display: absolute;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  border: 2px solid #080808;
  border-radius: 10px;
  width: 318px;
}

<div class="modal-bg">
                        <div class="modal">
                            <div class="close-section">
                                <span class="modal-close">
                                    <i class="icon-cancel"></i>
                                </span>
                                <span class="title">Settings</span>
                            </div>
                            
                            <div id="renderer-section" class="sections">
                                    <div class="header">
                                        <span class="header-ins">Renderer</span>
                                    </div>
                                    <div class="renderer-content">
                                        <div class="list-row">
                                            <input id="GPUrendering" type="checkbox" class="form-check-input">
                                            <label for="GPUrendering" class="check-trail">
                                                <span class="check-handler"></span>
                                            </label>     
                                            <div class="use-gpu">Use GPU rendering</div>         

                                            <p class="content">Game resolution</p>                                                                        
                                                <input id="my-range" class="slider1" type="range" min="50" max="200" value="50" step="10"> 
                                                <p>Value: <span id="value"></span>%</p>
                                        </div>  
                                    </div>
                            </div>

                            <div id="game-section" class="sections">
                                <div class="header">
                                    <span class="header-ins">game</span>
                                </div>
                                <div class="game-content">w</div>
                            </div>

                            <div id="cells-section" class="sections">
                                <div class="header">
                                    <span class="header-ins">Cells</span>
                                </div>
                                <div class="cells-content">w</div>
                            </div>

                            <div id="hud-section" class="sections">
                                <div class="header">
                                    <span class="header-ins">HUD</span>
                                </div>
                                <div class="hud-content">w</div>
                            </div>

                            <div id="chat-section" class="sections">
                                <div class="header">
                                    <span class="header-ins">Chat</span>
                                </div>
                                <div class="chat-content">w</div>
                            </div>

                        </div>
                    </div>

 

Answer 1

Z tego co zauważyłem jak coś jest sticky to ma swoją pozycje.
Przykleja się dopiero gdy dosięgnie górną krawędź ekranu.
Prawdopodobnie chowa ci się za tym szarym paskiem u góry(nad napisem Settings).
Może daj mu padding-top i zdaje mi się czy top: 0 działał tylko dla position: absolute
Ale ogólnie nobem jestem to pewności nie mam

Answer 2

dodaj z-index do .close-section :P

Comments

Działa dziękuje bardzo :)