html image 图片重叠,html – 在Img上叠加Figcaption

我相信这就是你所追求的：

img {

width: 400px;

clear: left;

margin-bottom: 1px;

margin-right: 10px;

}

figcaption {

background-color: black;

color: white;

max-width: 400px;

font-size: 10px;

display: block;

float: left;

position: absolute;

top: 0;

}

figure {

position: relative;

float: left;

}

Copyright Here

Copyright Here

This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected

by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should

not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around

the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should

be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This

test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.

你应该定位< figcaption>元素绝对,然后定位< figure>相对.绝对定位的元素相对于它们最接近的位置祖先定位,这就是为什么你想要在图上的相对定位.然后,浮动数字而不是图像.