Блог

Главная - Вопросы по программированию - Панель навигации поверх другого содержимого CSS

Панель навигации поверх другого содержимого CSS

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Итак, у меня есть панель навигации, а затем содержимое страницы.

Я пытаюсь добавить тень в нижнюю часть панели навигации, но когда я это делаю, вы не можете видеть тень, потому что содержимое после панели навигации находится «сверху» тени.

Я могу видеть тень, только если я не вставляю какой-либо цвет фона в содержимое после панели навигации.

Кроме того, я старался, чтобы панель навигации всегда находилась в верхней части экрана при прокрутке страницы position: fixed . И это работало в том смысле, что положение панели навигации всегда находилось в начале страницы, но если я прокручивал содержимое, оно переходило на панель навигации, а не наоборот.

Короче говоря, я чувствую, что содержимое находится «поверх» панели навигации, тогда как должно быть наоборот.

По сути, я хочу, чтобы тень панели инструментов находилась поверх основного содержимого.

 .toolbar {
  height: 67px;
  background-color: #303031;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0px 0px 40px -2px rgba(0,0,0,3);
}

.body{
  display: inline-block;
  width:100%;
  height: 600;
  position: relative;
}

.box {
  background-image: linear-gradient(to bottom, #c8ccd1  , #808080);
  height:550px;
  width:24vw;
  bottom:0;
  left:0;
  padding-top: 60px;
}

.array-container {
  height: 400;
  position: absolute;
  bottom: 0;
  left: 355px;
}  
 <div className="page">
            <div className="toolbar">
             ///some code///
            </div>
            <div className="body">
              <div className="box">
              /// some code/// 
              </div>
              <div className="array-container">
              /// some code ///
              </div> 
            </div> 
     </div>

Ответ №1:

Добавить z-index: 2; на панель инструментов.

Проверьте приведенный ниже код.

 .toolbar {
  height: 67px;
  background-color: #303031;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0px 0px 40px -2px rgba(0,0,0,3);
  z-index: 2;
}

.body{
  display: inline-block;
  width:100%;
  height: 600;
  position: relative;
}

.box {
  background-image: linear-gradient(to bottom, #c8ccd1  , #808080);
  height:550px;
  width:24vw;
  bottom:0;
  left:0;
  padding-top: 60px;
}

.array-container {
  height: 400;
  position: absolute;
  bottom: 0;
  left: 355px;
}  
 <div class="page">
        <div class="toolbar">
         ///some code///
        </div>
        <div class="body">
          <div class="box">
          /// some code/// 
          </div>
          <div class="array-container">
          /// some code ///
          </div> 
        </div> 
 </div>