如何重疊圖像邊界與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邊框

回答

相關問題