html - CSS 将父 div 拉伸(stretch)到重叠子元素的最大高度

Question

我在图像上覆盖了一些标题文本，目前对其中一个元素使用相对/绝对位置(无论哪个)。我正在努力的是让父 div 完全显示两者的内容，而不管哪个更高。

示例标记:

.parent {
    position: relative;
    overflow: hidden;
    width: 100px; /* This is only here to force the title text in this example to expand beyond the image height for illustrative purposes. */
}

.background {
    width: 100%;
}

.title-text {
    position: absolute;
    top: 0;
    font-size: 32px;
    color: blue;
}

<div class="parent">
    <img class="background" src="http://www.placebacon.net/200/200">
    <div class="title-text">
        My Title (which might be quite long)
    </div>
<div>

(假设我可以实现我正在寻找的东西，上面的 overflow: hidden 显然会变得多余，但目前没有它，较高的元素会与父 div 下面的任何内容重叠。)

JSBin 在这里:http://jsbin.com/yixiniwere/edit?html,css,output

如何让这两个元素完全可见？如有必要，我可以更改标记或引入额外的容器元素。

Answer 1

您可以不使用 CSS-Grid 下的定位来覆盖元素。您只需将它们分配到网格中的相同位置即可。

.parent {

  /* IE10/11 support */
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr;

  margin: 1em auto;
  display: grid;
  width: 400px;
  /* for demo purposes */
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  background: pink;
}

.parent * {

  /* IE10/11 support */
  -ms-grid-column: 1;
  -ms-grid-row: 1;

  grid-column: 1/2;
  grid-row: 1;
  color: red;
}

<div class="parent">
  <img class="background" src="http://www.placebacon.net/400/200">
  <div class="title-text">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum perspiciatis commodi, adipisci reiciendis quo suscipit! Ratione laborum magnam cumque tempora ab cupiditate delectus, perferendis enim porro impedit nihil architecto, ad consequatur exercitationem
    fugiat error debitis molestias itaque, eligendi necessitatibus quae dolore beatae nemo doloremque. Quos voluptate tenetur explicabo beatae nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo est perspiciatis possimus iusto! Voluptatem
    facilis blanditiis aspernatur facere animi placeat. Quisquam fuga laudantium cupiditate eos exercitationem neque eius, distinctio consectetur?Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aperiam, ipsum tempora reiciendis, id ea
    eveniet placeat necessitatibus deserunt mollitia dignissimos exercitationem aliquam porro quaerat, labore ducimus rerum animi praesentium?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, laboriosam.
    <div>