绝对定位的元素的父元素绝对必须适应子元素的高度答案

【问题标题】：Parent element of an element absolutely positioned absolute must accomodate the height of the child绝对定位的元素的父元素绝对必须适应子元素的高度
【发布时间】：2019-02-20 14:23:12
【问题描述】：

<!DOCTYPE html>
<html>
<head>

<style>

.Background {
background-image:url("https://images.unsplash.com/photo-1517524285303-d6fc683dddf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80");
height: 220px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.Relative {
position:relative;
}
.Absolute {
 position: absolute;
  left: 100px;
  top: 150px;
  border: 1px solid red;
}

h2 {
 
}
</style>
</head>
<body>

<div class="Main">
<div class="Relative">

<div class="Background"></div>

<div class="Absolute">
<h1>Hi</h1>
<h1>Hi</h1>
<h1>Hi</h1>
<h1>Hi</h1>
</div>
</div>

<footer>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</footer>
</div>

绝对定位的元素显示在页脚上方。我想要的是具有类 Relative 的元素占据其具有类 Absolute 的子元素的高度，这样它就不会显示在页脚上.

【问题讨论】：

你想要什么..我不明白：D
class Relative 正在从 Background child 获取高度，它具有`高度：220px;` 所以 class="Absolute" 显示在页脚上。
你想在图片和页脚之间显示绝对值吗？
父元素不取任何绝对子元素的高度，如果要设置父元素的高度只能通过js实现
如果您希望背景始终位于文本之后，则将背景设为绝对，将文本设为相对。

标签： html css css-position absolute

【解决方案1】：

现在，我将“背景”设置为相对 div 的绝对值，并将“绝对”div 设置为相对值，以便为内容 div 提供父元素高度。在这种情况下，背景将始终采用父元素的高度和宽度，无论您可以放置多少文本，它都不会与页脚重叠。希望对你有帮助

.Background {
background-image:url("https://images.unsplash.com/photo-1517524285303-d6fc683dddf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80");
height: 220px;
background-size: 100% 100%;
background-repeat: no-repeat;
 position: absolute;
 height: 100%;
 width: 100%;
 z-index:0;
}
.Relative {
position:relative;
}
.Absolute {
position:relative;
z-index: 1;
}

h2 {
 
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="Main">
<div class="Relative">

<div class="Background"></div>

<div class="Absolute">
<h1>Hi</h1>
<h1>Hi</h1>
<h1>Hi</h1>
<h1>Hi</h1>
<h1>Hi</h1>
</div>
</div>

<footer>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</footer>
</div>

【讨论】：

【解决方案2】：

function setHeight() {
    let rel = document.querySelector(".Relative");
    let abs = document.querySelector(".Absolute");

    let hei = abs.scrollHeight;
    hei += abs.offsetTop;

    rel.style.height = hei + "px";

}

setHeight();

window.addEventListener("resize", setHeight);

.Background {
    background-image:url("https://images.unsplash.com/photo-1517524285303-d6fc683dddf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80");
    height: 220px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.Relative {
    position:relative;
    background-color: #333;
}
.Absolute {
    position: absolute;
    left: 100px;
    top: 150px;
    border: 1px solid red;
}

<div class="Main">
         <div class="Relative">
            <div class="Background"></div>
            <div class="Absolute">
               <h1>Hi</h1>
               <h1>Hi</h1>
               <h1>Hi</h1>
               <h1>Hi</h1>
            </div>
         </div>
 <footer>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</footer>
</div>

【讨论】：

有什么方法可以在不使用 javascript 的情况下实现这一点？只使用纯 css？