CSS将父母置于覆盖儿童的最大高度

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>

Answer 2

另一个选项可能是摆脱相对和绝对定位，而仅将文本的'边缘顶'属性设置为背景的负值。示例(如果图标的固定高度为100px，则可以将标题文本的边距设置为-100px(：

.parent {
    width: 150px;
}
.background {
    width: 100%;
}
.title-text {
    margin-top:-100px;
    width:100%;
    font-size: 20px;
}

如果背景的高度未固定，则应该能够通过JavaScript获取并将其设置在那里。

JS bin示例

Answer 3

non CSS网格/flexboxy方式

.parent {
  position: relative;
  width: 300px;
  margin: 0 auto;
  background: #a03;
}
img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  z-index: 1;
}
.title-text {
  position: absolute;
  z-index: 10;
}

<div class="parent">
  <img class="background" src="https://images.unsplash.com/photo-1472837525377-e96df4f8f34e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b29757bb040fca6a9b0d79cbd31f1119">
  <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>
      
    </div>