html - 如何使用 CSS 和 HTML 实现两张图片重叠？

Question

我有两张图片。一个在另一个之上。当我调整浏览器窗口大小时，图像必须放在相同的位置。我该如何实现？

这是我的 html 代码:

  <div id="stars-container">
                <div id="star-1" class="stars"
                 data-1000p="position:absolute;opacity:0;"
                 data-1010p="position:absolute;opacity:1;"
                 >
                    <img src="img/stars/1.png" alt="">
                </div>
</div><!-- end of stars-container -->

 <!-- Pegasus bg starts -->
                <div class="pegasus"
                 data-1000p="opacity:0;"
                 data-1270p="opacity:1;">
                    <img src="img/stars/horse1.png">
                </div> 
                <!-- Pegasus bg ends -->
            </div>
           </div>

这是它的 CSS:

#stars-container{
    height:60%;width:50%;display:block;
    position:relative;
    top:14%;left:20%;z-index:9; 
}
.stars{
    position:relative;
    z-index:9;
}
.stars img{
    position:absolute;
    width:100%;
}   
#star-1{top:25%;left:30%;}
#star-2{top:20%;left:33.5%;}
#star-3{top:25%;left:35%;}
#star-4{top:30%;left:39%;}
#star-5{top:29.5%;left:41.5%;}
#star-6{top:35%;left:42.5%;}
#star-7{top:35%;left:51.5%;}
#star-8{top:30%;left:52.5%;}
#star-9{top:44%;left:48.5%;}
#star-10{top:55.5%;left:47.1%;}
#star-11{top:53%;left:42%; }
#star-13{top:56%;left:37.5%;}
#star-14{top:62%;left:33%;}
#star-15{top:54%;left:42%;}
#star-16{top:49.5%;left:37%;}
#star-17{top:52%;left:33%;}
#star-18{top:51.5%;left:30%;}
.pegasus{
    width:50%;height:50%;
    position:relative;left:20%;
    top:-40%;
}
.pegasus img{
    position:absolute;
    width:100%;
}

所以，基本上在 18 颗星群下面有一个飞马座的图像。我正在为一个视差网站做这件事。

Answer 1

您可以在 html 代码中添加样式标签。

style="position:fixed;width:36px; height:36px; left:60px;top:50px"

对你来说重要的参数是 left(x) 和 top(y)。