липкое положение CSS React

Question

Я не знаю, почему position: sticky не работает на моем сайте. Position: fixed работает, но тогда моя панель навигации и leftMenu скрыты под другими компонентами ..

CSS

.NavBar{
    padding: 0 15px 0 0px;
    background-color: #6E81FB;
    margin: 0px;
    box-sizing: border-box;
    height: 70px;
    text-align: left;
    display: flex;
    line-height: 70px;
    align-items: center;
    border-bottom: 2px solid #575353;
    position: sticky;        
}


.UnloggedLeftMenu{
    height: calc(100vh - 70px);
    width: 70px;
    background-color: #6E81FB;
    padding: 20px 0 0 0;
    border-right: 2px solid #575353;
    box-sizing: border-box;
    position: sticky;        
}

Answer 1

@ poldeeek, вам не следует использовать position: sticky в вашем случае, потому что это не связано с переключением между relative и fixed позициями.

Это может быть легко достигнуто с помощью position: fixed, и вы бы необходимо установить z-index, чтобы pu sh элементы над остальными.

Ниже приведено CSS -

.NavBar{
    padding: 0 15px 0 0px;
    background-color: #6E81FB;
    margin: 0px;
    box-sizing: border-box;
    height: 70px;
    text-align: left;
    display: flex;
    line-height: 70px;
    align-items: center;
    border-bottom: 2px solid #575353;
    position: fixed;  
    top: 0;
    left: 0; right: 0; //To stretch the navbar full width    
    z-index: 99;
}

.UnloggedLeftMenu{
    width: 70px;
    background-color: #6E81FB;
    padding: 20px 0 0 0;
    border-right: 2px solid #575353;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 70px; bottom: 0; //To take the height excluding header; No need to specify height explicitly
    z-index: 99;        
}

body {
    padding: 70px 0 0 70px; //To avoid hiding of main content
}

Надеюсь, это поможет!