Css 在2个居中div的顶部有2个浮动div

我正在尝试创建一些东西，让我可以在图片的顶部放置一些东西，在这种情况下，小图片

基本上，它是这样的，两个主要div都居中：

蒂亚

对不起，给你

HTML

---

您必须使用

z-index

和

position

来实现它

HTML

<div id="container">
    <div id="left"><a href=""><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></a></div>
     <div id="leftimage"><h2>963</h2></div>         
     <div id="right"><div id="rightimage"><h2>434</h2></div><a href=""><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></a></div>

</div>

<div class="container">
    <div class="img1">
        <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
    </div>
    <div class="img2">
        <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
    </div>
</div>

---

使用此代码，图像的宽度和高度将根据您的图像进行计算：

HTML

<div id="container">
    <div id="left"><a href=""><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></a></div>
     <div id="leftimage"><h2>963</h2></div>         
     <div id="right"><div id="rightimage"><h2>434</h2></div><a href=""><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></a></div>

</div>

<div class="container">
    <div class="img1">
        <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
    </div>
    <div class="img2">
        <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
    </div>
</div>

---

你应该发布一些代码，向我们展示你到目前为止所做的尝试。我不清楚你想要实现什么。请详细说明。在该分区的css中使用背景属性。这一切都很顺利。我仍然不明白Z-Index是什么…为什么是1还是1000？@user3367787:你可以在那里提供1000的1个instaed，没关系，我们只需要提供Z-Index就可以把div放在上面another@user3367787当前位置如果它对您非常适合，请接受它，欢迎您提供更多信息doubts@user3367787你知道如何接受答案吗，通过单击答案左侧的绿色箭头？

<div class="container">
    <div class="img1">
        <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
    </div>
    <div class="img2">
        <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
    </div>
</div>

.container{
    width:270px;
    margin:0 auto;
    overflow:hidden;
}
.img1,.img2{
    width:128px;
    height:128px;
    background:url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png);
    float:left;
    margin-right:10px;
    border:1px solid #000;
}
.img2{margin:0;}

<div class="container start">

    <img src="http://www.placehold.it/300/555555"></img>

    <div id="base1" class="base">

        <img src="http://www.placehold.it/200/654321"></img>

        <div id="overlay1" class="overlay">

            <img src="http://www.placehold.it/100/123456"></img>

        </div>

    </div>

</div>

.base {
    width: 200px;
    height: 200px;
    position: relative;
    top: -290px;
    left: 10px;
}

.overlay {
    width:100px;
    height:100px;
    position: relative;
    left: 10px;
    top: -190px;
}

.container {
    left:100px; 
    width: 300px;
    height: 300px;
    margin: 10px;
    float: left;
}

.start {
    clear: left;
}