Блог

Главная - Вопросы по программированию - Как сделать тень окна над 2 элементами, но сделать позицию 1 элемента липкой?

Как сделать тень окна над 2 элементами, но сделать позицию 1 элемента липкой?

#html #css #styles

#HTML #css #стили

Вопрос:

Я хочу поместить тень окна над 2 элементами, в примере ниже это текст «qwerewqrwqrewqrer» и «fdsafdasfdsafdsafas», но я хочу, чтобы у «fdsafdasfdsafdsafas» была липкая позиция. Проблема с приведенным ниже кодом заключается в том, что позиция липкая только относительно контейнера box shadow div, что означает, что она не будет липкой относительно страницы. Можно ли сделать положение липким относительно страницы, а нельзя?

Пример кода того, что у меня есть:

 <!DOCTYPE html>
<html >
<head>
<style type="text/css">

#tableShadow {
  height:80vh;
  box-shadow: 0px 0px 10px #888888;
}

#sticky {
  position: sticky;
  top: 0;
  z-index: 3;
}

body {
  min-height:200vh;
}

</style>
</head>
<body>
  <div id=tableShadow>
     qwerewqrwqrewqrer
     <div id=sticky>
        fdsafdasfdsafdsafas
     </div>
  </div>
</body>
</html>

Редактировать:
Ниже приведены некоторые изображения
Когда вы впервые видите страницу

При прокрутке немного вниз

и, очевидно, когда вы прокручиваете страницу вниз, это просто обычная белая страница.

Комментарии:

1. Можете ли вы добавить ожидаемый результат, снимок экрана или изображение ?

2. Я не знаю, как создать ожидаемый результат, я посмотрю в Интернете пример, но в то же время, это в основном будет контейнер box shadow, который является position: sticky только в его конечной половине. Это означает, что другая половина будет прокручиваться со страницы, тогда как липкая половина останется в верхней части страницы. Возможно, это невозможно, я просто хочу знать, так ли это.