Тень родительского взгляда исчезла - PullRequest
Новая
       1

Тень родительского взгляда исчезла

1 голос
/ 27 февраля 2020

Привет, я сталкиваюсь с проблемой исчезновения тени при перемещении ребенка div ниже sticky родителя div.

Код: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html, body{

         min-height: 100% !important;
        }

        body{

            margin: 0;
            background-color: #470c77;
        }

        .header{

            width:  100%;
            height: 50px;
            background-color: rgb(238, 238, 238);
            box-shadow: 0px 0px 6px 2px #000000;

            position: sticky;
            top: 0;
        }

        .view{

            width: 100%;
            height:25%;
            background-color: rgb(255, 255, 255);
            position: fixed;
            top: 50px;
            z-index: 0;
        }
    </style>
</head>
<body>
     <div class="header">
         <!-- TODO:- Some elements here -->
         <div class="nav">
             <!-- TODO:- Some Elements Here -->
             <div class="view">

             </div>
         </div>
     </div>
</body>
</html>

Основная проблема - тень исчезает с nav. Если я сделаю top: 50px; до view, тогда появится тень. Но цвет фона кузова тоже виден.

текущий макет: enter image description here

Ожидаемый макет:

enter image description here

Пожалуйста, помогите мне решить эту проблему только с CSS.

Ответы [ 3 ]

1 голос
/ 27 февраля 2020

Так что, по сути, тень не была удалена или исчезла, просто она скрыта под div .view. Итак, вот что вы будете делать: просто удалите тень с заголовка, так как он скрыт, добавьте обновление фона вашего .view div. Смотрите мой код ниже: 

html, body{
  min-height: 100% !important;
}

body{

  margin: 0;
  background-color: #470c77;
}

.header{
  width:  100%;
  height: 50px;
  background-color: rgb(238, 238, 238);
  position: sticky;
  top: 0;
}

.view{
  width: 100%;
  height:25%;
  background: linear-gradient(to bottom, #999 0, #fff 7px, #fff 100%);
  position: fixed;
  top: 50px;
  z-index: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <div class="header">
         <!-- TODO:- Some elements here -->
         <div class="nav">
             <!-- TODO:- Some Elements Here -->
             <div class="view">

             </div>
         </div>
     </div>
</body>
</html>
1 голос
/ 27 февраля 2020

Если вы хотите получить box-shadow для липкого элемента, то вам нужно использовать :after псевдо-класс и задать тень там, как, 

  .header:after {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 7px;
      left: auto;
      width: 100%;
      top: 0;
      box-shadow: 0px 0px 6px 2px #000000;
  }

И изменить класс заголовка css как показано ниже, 

        html, body{

         min-height: 100% !important;
        }

        body{

            margin: 0;
            background-color: #470c77;
        }

        .header{
            width:  100%;
            height: 50px;
            background-color: rgb(238, 238, 238);
            position: sticky;
            top: 0;
        }
      
          .header:after {
          z-index: -1;
          position: absolute;
          content: "";
          bottom: 7px;
          left: auto;
          width: 100%;
          top: 0;
          box-shadow: 0px 0px 6px 2px #000000;
         }

        .view{

            width: 100%;
            height:25%;
            background-color: rgb(255, 255, 255);
            position: fixed;
            top: 50px;
            z-index: 0;
        }
<div class="header">
      <!-- TODO:- Some elements here -->
     <div class="nav">
         <!-- TODO:- Some Elements Here -->
         <div class="view">

         </div>
     </div>
 </div>
1 голос
/ 27 февраля 2020

Попробуйте это: 

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html, body{

         min-height: 100% !important;
        }

        body{

            margin: 0;
            background-color: #470c77;
        }

        .header{

            width:  100%;
            height: 50px;
            background-color: rgb(238, 238, 238);
            -webkit-box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
			-moz-box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
			box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
            position: sticky;
            top: 0;
        }

        .view{

            width: 100%;
            height:25%;
            background-color: rgb(255, 255, 255);
            position: fixed;
            top: 50px;
            z-index: 0;
        }
    </style>
</head>
<body>
     <div class="header">
         <!-- TODO:- Some elements here -->
         <div class="nav">
             <!-- TODO:- Some Elements Here -->
             <div class="view">

             </div>
         </div>
     </div>
</body>
</html>

Чтобы скрыть фон, вы можете увеличить .view height

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...