如何让子元素覆盖父元素？答案

【问题标题】：How to make child element overlay the parent element?如何让子元素覆盖父元素？
【发布时间】：2020-08-11 16:22:03
【问题描述】：

我只使用 CSS 和 Flexbox 来构建响应式页面。我有一个子元素应该在父元素之外“溢出”，如下所示：

<div class="container-hero">
  <div class="hero-content">
    <h1>Tech Challenge</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
   </div>
   <div class="hero-img">
     <img src="assets/image-1.jpg">
   </div>
</div>

CSS

.container-hero {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  position: relative;
  margin: 40px 0;
}

.hero-img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

.hero-img img {
  width: 100%;
  height: auto;

}


  .hero-content {
    background-color: #D64C31;
    color: #FFFFFF;
    align-self: flex-end;
    width: 50%;
    position: absolute;
    bottom:0;
    left:0;
    padding: 40px 60px;
  }

任何帮助将不胜感激！

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

 .container-hero {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* overflow-x: hidden; */
  position: relative;
  margin: 40px 0;
}

.hero-img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

.hero-img img {
  width: 100%;
  height: auto;

}


  .hero-content {
    position:absolute;
    background-color: #D64C31;
    color: #FFFFFF;
    width: 50%;
    padding: 40px 60px;
    bottom: -20px;
    left:0;
  }
</div>

<div class="container-hero">
  <div class="hero-content">
    <h1>Tech Challenge</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
   </div>
   <div class="hero-img">
     <img src="https://source.unsplash.com/800x300">
   </div>
</div>

您要查找的属性是 CSS Position。

参考：CSS Position

.parent{
  width:250px;
  height: 20px;
  background: yellow;
  position:relative;
}
.child{
  width:80px;
  height: 100px;
  background: purple;
  position:absolute;
  bottom: 0;
  right:0;
}

<div class="parent">
  <div class="child"></div>
</div>

【讨论】：

我刚刚在上面发布了我的代码。我正在使用相对和绝对属性。其中一个子元素是我需要 100% 宽度的图像，这就是我对如何做到这一点感到困惑的地方。

【解决方案2】：

喜欢吗？

<html>
<head>
    <style>
        .container {
            background: #ccc;
            width: 50%;
            margin: 0 auto;
            position: relative;
            height: 700px;
        }
        .overflowing-element {
            background: red;
            width: 200px;
            height: 200px;
            position: absolute;
            right: -200px;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        test
        <div class="overflowing-element">
            bla
        </div>
    </div>
</body>
</html>

仅适用于该溢出元素的固定宽度，或适用于 JavaScript。

编辑：您刚刚编辑了图像，现在我真的不知道您的意思：D

【讨论】：

【解决方案3】：

我知道了，谢谢你的帮助！

我的父元素有一个overflow: hidden 我禁用它并调整子元素如下：

bottom: -40px

如果您有任何反馈或这被认为是不好的做法，请告诉我。我只是从这里开始:)

【讨论】：

如果任何其他答案也有效或帮助您到达这里，您可以考虑接受其中一个，以便您的问题在网站上被标记为已解决，并且您还可以获得一些代表点 :)或者，当您获得足够的声誉时，考虑对有用的答案进行投票，并感谢提供帮助的用户，这会让其他用户知道该答案也可能对他们有所帮助

【解决方案4】：

使用 CSS 定位属性。

.container-hero {
  position: relative; /* creates the container for absolutely positioned children */
}

.hero-content {
  position: absolute;
  bottom: -20px;  /* use this offset to align vertically */
  left: 20px;     /* use this offset to align horizontally */
  background-color: #D64C31;
  color: #FFFFFF;
  width: 225px;
  padding: 40px 60px;
}

<div class="container-hero">
  <div class="hero-content">
    <h1>Tech Challenge</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
  </div>
  <div class="hero-img">
    <img src="https://via.placeholder.com/500x250.png?text=hero image">
  </div>
</div>

【讨论】：