我正在尝试将 图像放在文本 前面，这是在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>
谢谢，
答案 0 :(得分：2)
你可以这样做：
img {
position: absolute;
z-index: 1;
}
并且，如果你使父div相对：
div {
position: relative;
}
您可以将图像移动到文本div中的任何位置：
img {
position: absolute;
z-index: 1;
left: 30px;
top: 20px;
}
答案 1 :(得分：1)
尝试使用它：
img {
z-index: 1;
position: absolute;
}
如果您想要图像前面的文本，只需将z-index更改为-1
如果您想在其他地方找到图片，请添加：
img {
z-index: 1;
position: absolute;
left: 50px;
top: 50px;
}
并根据需要进行更改。 祝你好运：）
答案 2 :(得分：1)
要触发z-index，您需要将position重置为static的任何有效值：
absolute：
img,
span {
vertical-align: middle;
}
img {
position:absolute;
z-index: -1;
}<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>
relative：
img,
span {
vertical-align: middle;
}
img {
position:relative;
margin-right:-100px;/* can be usefull*/
z-index: -1;
}<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>
fixed（不是最好的）：
img,
span {
vertical-align: middle;
}
img {
position:fixed;
z-index: -1;
}<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>