Reputation: 1421
i want to have two borders. The first one is the red-one of the image, which is rounded. The second is the blue-one of the div. Now i want that the red-one is over the blue-one so it look likes the blue-one has round curves at the start. But i only get the blue-one above the red-one. Can you help me with my struggle?
Question: How to get the red-border above the blue-border?
.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>
Upvotes: 0
Views: 1288
Reputation: 53709
Assinging a non-static
position
will give an element z-index. Just leave the position
on .imageWrapper
, remove z-index
from .image
(unnecessary), and remove position: relative;
from .info
and that will give .imageWrapper
a higher z-index
so it will appear over .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>
Upvotes: 3