位置：粘性；不适用于图像

Question

我正在尝试使图像具有粘性，并且无法正常工作。这是我的HTML和CSS。

HTML

<div class="media">
  <img class="sticky" src="mediabuttons.PNG" width="25%" height="25%">
</div>

CSS

用于div。

.media{
   float: left;
   text-align: right;
   width: 15%;
   margin-top: 65px;
}

CSS 用于图像。

.sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

1 个答案:

答案 0 :(得分：1)

我从您的代码中创建了一个简化的代码段，并且效果很好。
您的问题应该出在另一种样式上！

看到它正常工作：

.media {
  float: left;
  height: 2000px;
  background: linear-gradient(to bottom, red, green 50%, blue 100%);
}

.sticky {
  position: sticky;
  top: 0;
}

<div class="media">
  <img class="sticky" src="http://placekitten.com/g/100/100">
</div>

Answer 1

我从您的代码中创建了一个简化的代码段，并且效果很好。
您的问题应该出在另一种样式上！

看到它正常工作：

.media {
  float: left;
  height: 2000px;
  background: linear-gradient(to bottom, red, green 50%, blue 100%);
}

.sticky {
  position: sticky;
  top: 0;
}

<div class="media">
  <img class="sticky" src="http://placekitten.com/g/100/100">
</div>