Question

我需要的是我在网站上插入图片1。在我这样做之后，我想在图像1中显示位置相对，前5等图像2.因此，如果我移动图像1，图像2仍将位于图像1上的相同位置。

我试图将图像2与相对位置放在图像1上。但是当我移动图像1时，图像2仍处于旧位置。

CSS

.image1 {
    background-color:#F2630A;
    margin:10px;
    padding:10px;
    height:250px;
    width:250px;
}
.image2 img {
    // Here I'm lost. Tried with position relative but it's not a good way.   
}

HTML

<div class="image1">
   <div class="image2">
       <img src="items/test.gif">
   </div>
</div>

Answer 1

您可以将absolute和relative定位结合起来。如果我理解你的问题，以下内容应该达到你的需要：

.image1 {
    position: relative;
    background-color:#F2630A;
    margin:10px;
    padding:10px;
    height:250px;
    width:250px;
}

    .image1 .image2 {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 240px;
        height: 240px;
    }
        .image1 .image2 img {
            max-width: 100%;
        }

jsFiddle Demo

Answer 2

让父母绝对和儿童相对

像image1应该是绝对的，而image 2应该是相对的

根据背景像素显示图像

2 个答案: