Z-index for image and div [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am looking for a way to allow an image inside of a div to stay overflow:visible and to allow the border of the parent div to overlap the image. Right now I have the image right where I want it using negative margins, but the images is covering the parent div's border.
I tried using z-index for the image and the div but that did now work.
This is the effect that I am trying to achieve.
http://imgur.com/a/yt8eU
This where I currently am.
http://imgur.com/a/sgYjI
https://jsfiddle.net/zgwywq0v/
random html <p>

Answer 1

Position the image absolutely or relatively and set it z-index: -1.
div.keynote {
border: 3px solid #F68B1F;
position: relative;
}
div.keynote img {
position: absolute;
left: -20px;
top: -20px;
z-index: -1;
}
https://jsfiddle.net/zgwywq0v/3/

Answer 2

The main trick here is to use the pseudo element ::before for the border, and to align them left/right I gave their parent keynote display: flex
Note, an obvious way would be using z-index, though if one can do it without, do it without
div.keynote {
position: relative;
display: flex;
}
div.keynote::before {
content: '';
position: absolute;
border: 3px solid #F68B1F;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
}
div.keynote .speaker-info {
position: relative;
padding: 30px 30px 30px 10px;
box-sizing: border-box;
}
<div class="keynote keynote-border">
<div>
<img src="http://placehold.it/240x320">
</div>
<div class="speaker-info">
<p class="name">PASTOR
<br><strong>PATRICK</strong>WINFIELD</p>
<p class="session">PREPARING FOR TOMORROW</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie rutrum ipsum, luctus interdum metus egestas non. Aliquam at mi sollicitudin leo blandit ornare. Suspendisse laoreet ultrices ante. Nunc a velit elementum, pretium erat ut, vulputate
ante. Maecenas ac magna augue. Donec ac mauris lectus.</p>
</div>
</div>
Updated based on comment
If you can't/don't want to use flex, here is a fallback
div.keynote {
position: relative;
overflow: auto; /* clear float and grow with its content */
}
div.keynote::before {
content: '';
position: absolute;
border: 3px solid #F68B1F;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
}
div.keynote div:first-child {
float: left;
width: 240px;
}
div.keynote .speaker-info {
position: relative;
margin-left: 240px; /* left div width */
padding: 30px 30px 30px 10px;
box-sizing: border-box;
}
<div class="keynote keynote-border">
<div>
<img src="http://placehold.it/240x320">
</div>
<div class="speaker-info">
<p class="name">PASTOR
<br><strong>PATRICK</strong>WINFIELD</p>
<p class="session">PREPARING FOR TOMORROW</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie rutrum ipsum, luctus interdum metus egestas non. Aliquam at mi sollicitudin leo blandit ornare. Suspendisse laoreet ultrices ante. Nunc a velit elementum, pretium erat ut, vulputate
ante. Maecenas ac magna augue. Donec ac mauris lectus.</p>
</div>
</div>

Answer 3

Take the image out of the div and place bordered div and img inside a parent with position: relative; then you can change the position and z-index of bordered div and img to get your result.

Answer 4

This looks like the perfect opportunity to deploy an ::after pseudo-element - this will enable you to make the orange border exactly the dimensions you need it to be and position it exactly where you want it to be, completely independently of all the other elements.
.profile-card {
margin: 100px 0 0 100px;
width: 600px;
height: 300px;
font-family: arial, helvetica, sans-serif;
}
.profile-card::after {
content: '';
position: absolute;
top: 70px;
left: 70px;
z-index: 0;
display: block;
width: 600px;
height: 220px;
border: 3px solid rgb(255,165,0);
}
.profile-card h2 {
font-weight: 300;
}
.profile-card h2 b {
font-weight: 900;
}
.profile-card p,
.profile-card a.more {
font-size: 11px;
}
.profile-card h2,
.profile-card h2 ~ strong,
.profile-card a.more {
text-transform: uppercase;
}
.profile-card img {
display: block;
float: right;
width: 280px;
height: 280px;
background-color: rgb(191,191,191);
border: 1px solid rgb(0,0,0);
transform: translateY(-108px);
}
.profile-card a.more {
display: inline-block;
position: relative;
z-index: 6;
margin-left: 90px;
padding: 12px;
color: rgb(255,255,255);
background-color: rgb(255,165,0);
text-decoration: none;
}
<div class="profile-card">
<h2><b>Profile</b> Name</h2>
<img src="/profile-name.png" alt="Profile Photo" />
<strong>Profile Tagline Here</strong>
<p>Paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here.</p>
<a class="more" href="/more.html">Read More</a>
</div>