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

我想有两个边框。第一个是红色的图像，它是圆形的。第二个是蓝色的div。现在我想要红色的一个是蓝色的，所以它看起来很喜欢蓝色 - 一开始就有圆形曲线。但我只能得到红色之上的蓝色。你能帮我解决我的难题吗？如何重叠图像边界与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-q-g-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>

来源

2017-03-05 DomeTune

你几乎那里。为了使其工作，添加“位置：相对;”到你的.image类，因为z-index只适用于定位元素。然而正确的做法是将容器放在前面。因此，在.imageWrapper元素上添加z-index，而不是将其添加到img元素上。 – Greg

Assinging非staticposition将给出元件的z索引。刚刚离开的.imageWrapper的position，从.image删除z-index（不必要的），并从.info删除position: relative;并会给.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-q-g-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>

来源

2017-03-05 21:36:21

这就是我一直在寻找的。谢谢。 – DomeTune

@DomeTune没问题。 –

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

回答

相关问题