html - 文本前面的CSS图像

Question

我想在文本前面放置一个图像，它位于一个 div 中。几乎所有对此的搜索都会带来有关如何将文本放在图像前面的结果。这不是我想要做的。

在下面的示例中，我有一个 gif 并尝试使用 z-index: -1;在 CSS 中，但这不起作用。

HTML

div {
  position: relative;
}

img {
  position: absolute;
  z-index: 1;
  vertically-align: middle;
  left: 50%;
}

<div>
  <img width="100" height="100" src="http://bestanimations.com/Animals/Reptiles/Dinosaurs/dinosaur-animated-gif-6.gif" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis aliquam eros, sed vehicula eros rhoncus eu. Cras bibendum rhoncus nisl, non venenatis enim interdum vel. Mauris sodales risus ac ex suscipit ultricies. Duis neque purus, auctor
  non magna vel, euismod posuere metus. Fusce sit amet tortor quis felis consectetur iaculis. Phasellus risus nibh, finibus lacinia porta a, sagittis quis orci. Integer feugiat sit amet diam sit amet accumsan. In at finibus eros, vitae dictum eros. Donec
  dignissim tellus id dui auctor convallis. Donec in faucibus eros, at ultrices felis. Vivamus eros augue, suscipit a dignissim et, efficitur nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis consequat neque, et placerat
  tellus mollis ac. Curabitur ut pulvinar neque, eu aliquam purus. Vestibulum imperdiet, orci eget molestie ultricies, est dui faucibus dui, et venenatis neque sem non lorem. In in massa condimentum, vulputate lacus vitae, posuere lorem. Nullam faucibus
  augue a dolor vestibulum, id efficitur augue aliquam. Fusce in ipsum aliquet, scelerisque augue ac, pretium urna. Nunc rutrum lacus vitae magna congue, vel finibus ligula sodales. Aenean vitae egestas lectus. Quisque ut pretium nunc. Curabitur id lectus
  est. Duis nulla elit, vestibulum vitae pulvinar sit amet, tristique ut leo. Curabitur finibus ipsum sit amet ante venenatis efficitur. Fusce molestie nibh nec nisi pretium finibus. Ut ullamcorper sapien sapien, ut dictum libero elementum et. Cras sapien
  augue, placerat vitae venenatis in, tempor sed enim. Nullam interdum, ante a pretium condimentum, ante lacus sollicitudin odio, at luctus lectus elit in mauris. Aenean a hendrerit neque, et porta ipsum. Maecenas tincidunt, eros eu auctor posuere, odio
  felis tincidunt leo, id pellentesque neque neque nec diam. Sed ac ante ac neque porta suscipit. Sed nec lacus ligula. Nunc maximus fermentum risus eget vehicula. Sed ac varius tortor. Fusce blandit mollis commodo. Quisque orci magna, consequat et orci
  at, consequat interdum arcu. Vestibulum vel iaculis magna, ut gravida enim. Nullam sollicitudin pharetra auctor. Mauris vulputate justo lorem, non aliquet elit cursus sed. Duis ultricies euismod diam, in rhoncus nisi auctor sit amet. Morbi dignissim
  fermentum sem, vel volutpat quam accumsan ut. Suspendisse potenti. Aliquam quis lectus metus.
  <div>
  <div>
      I am a second div
  </div>

谢谢，

Answer 1

你可以这样做:

img {
    position: absolute;
    z-index: 1;
}

并且，如果您使父 div 成为相对的:

div {
    position: relative;
}

您可以将图像移动到该文本 div 内的任何位置:

img {
    position: absolute;
    z-index: 1;
    left: 30px;
    top: 20px;
}