如何将图像边框与div边框重叠

Question

我想有两个边界。 第一个是图像的红色图像，该图像被四舍五入。 第二个是div的蓝色代表。 现在，我希望红一个在蓝一个上，以便它看起来像蓝一个在开始时具有圆形曲线。 但是我只得到蓝一高于红一。 你能帮我挣扎吗？

问题：如何使红色边界高于蓝色边界？

 .imageWrapper { position: relative; display: inline-block; vertical-align: middle; height: 60px; } .image { width: 50px; height: 50px; border: 5px solid red; border-radius: 50%; z-index: 1; } .info { position: relative; font-size: 80%; display: inline-block; vertical-align: middle; width: 100px; height: 36px; line-height: 18px; padding: 5px 20px 5px 25px; border-color: blue; border-style: solid; border-width: 5px 5px 5px 0; margin-left: -20px; } .maintext { width: 100px; font-weight: 700; } .subtext { width: 100px; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

 <div class="outer"> <div class="imageWrapper"> <img src="http://lorempixel.com/output/technics-qg-100-100-9.jpg" class="image"> </div><!-- remove the white space of inline-block --><div class="info"> <div class="maintext ellipsis">Title here!</div> <div class="subtext ellipsis">Subtitle here!</div> </div> </div> 

Answer 1

评估一个非static position将给出一个元素的z-index。 只需将position保留在.imageWrapper ，从.image删除z-index （不必要），然后删除position: relative; 来自.info ，这将为.imageWrapper提供更高的z-index因此它将显示在.info之上

 .imageWrapper { position: relative; display: inline-block; vertical-align: middle; height: 60px; } .image { width: 50px; height: 50px; border: 5px solid red; border-radius: 50%; } .info { font-size: 80%; display: inline-block; vertical-align: middle; width: 100px; height: 36px; line-height: 18px; padding: 5px 20px 5px 25px; border-color: blue; border-style: solid; border-width: 5px 5px 5px 0; margin-left: -20px; } .maintext { width: 100px; font-weight: 700; } .subtext { width: 100px; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

 <div class="outer"> <div class="imageWrapper"> <img src="http://lorempixel.com/output/technics-qg-100-100-9.jpg" class="image"> </div><!-- remove the white space of inline-block --><div class="info"> <div class="maintext ellipsis">Title here!</div> <div class="subtext ellipsis">Subtitle here!</div> </div> </div>