Question

我正在寻找一种方法来允许div内的图像保持溢出：可见并允许父div的边框与图像重叠。现在我使用负边距将图像放在我想要的位置，但图像覆盖了父div的边框。

我尝试使用z-index作为图像和div，但现在确实有效。

这是我想要达到的效果。

这是我现在所在的地方。

random html <p>

Answer 1

绝对或相对地定位图像并将其设置为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

这里的主要技巧是使用伪元素::before作为边框，并将它们左/右对齐，我给它们的父keynote display: flex

注意，显而易见的方法是使用z-index，但如果没有，可以不用

进行

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"><a href="#" onclick="alert('Clickable link');">PASTOR</a>
      <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>

根据评论更新

如果您不能/不想使用flex，则此处为后备

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"><a href="#" onclick="alert('Clickable link');">PASTOR</a>
      <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

将图片从div中取出，并将div和img边框置于父position: relative;内，然后您可以更改position和{{带边框z-index和div以获得结果。

Answer 4

这看起来是部署::after伪元素的绝佳机会 - 这将使您能够使橙色边框完全符合您需要的尺寸，并将其准确定位到您想要的位置，完全独立于所有其他元素。

.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>

图像和div的Z-index

4 个答案: