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下的定位覆盖无元素。您只需将它们分配到网格中的相同位置即可。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

另一个选择可能是摆脱相对和绝对定位，只设置＆＃39; margin-top＆＃39;文本属性为背景的负值。示例（如果图标的固定高度为100px，您只需将标题文本的上边距设置为-100px）：

.parent {
    width: 150px;
}

.background {
    width: 100%;
}

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

如果背景的高度没有固定，你应该可以通过javascript获取并将其设置在那里。

js bin example

Answer 3

非css网格/弹性方式

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

CSS将父级div拉伸到重叠子级的最大高度

3 个答案: