Как отобразить липкий элемент над изображением? - PullRequest
Новая
       1

Как отобразить липкий элемент над изображением?

0 голосов
/ 02 апреля 2020

Я делаю веб-сайт, и у меня есть "липкий элемент" и куча изображений ниже, дело в том, что если я прокручиваю вниз "липкий элемент" идет позади изображения и, следовательно, становится невидимым. Я хочу сделать «липкий элемент» видимым при прокрутке вниз. Я пробовал свойство "z-index" CSS, но оно не работает (возможно, я не правильно его использую). 

<style>
div{
  position: sticky;
}
</style>

<body>
 <div>
  "Sticky element"
 </div>
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
</body>

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Вы также можете попробовать это, если это поможет вам, bcz, вы не упомянули, почему вы хотите использовать липкое. Так что это решение работает точно так же, как вы хотели. 

<style>
div{
  position: fixed;
  background-color: beige;
  width: 100%;
  top: 0;
  left: 0;
  padding: 10px 10px;
}
</style>

<body>
 <div>
  "Sticky element"
 </div>
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
</body>
0 голосов
/ 02 апреля 2020

Как видите, вам не нужен z-index для достижения этой цели, может быть, вы забыли добавить вершину в свой липкий элемент? Я также добавил розовый элемент к элементу, чтобы его было легче увидеть, но это, конечно, не требуется

Вам нужен только z-индекс, если элементы, которые идут после, также имеют определенный z-индекс. 

#sticky{
  position: sticky;
  top: 0;
  background: pink;
}
<div id="sticky">
  "Sticky element"
 </div>
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
<br>
 <img src="https://www.cecidiomas.es/images/cecidiomases/684-thinking-of-getting-a-cat-international-cat-care-3435.png">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...