如何使用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-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>

Answer 1

指定非static position会给出元素z-index。只需将position保留在.imageWrapper上，从z-index删除.image（不必要），然后从position: relative;删除.info，即可.imageWrapper 1}} 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>