关于html：绝对定位的元素的父元素绝对必须容纳子元素的高度


Parent element of an element absolutely positioned absolute must accomodate the height of the child

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>







Hi
Hi
Hi
Hi



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

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

相关讨论

现在，在这里，我将" background"绝对设为相对div，并将" absolute " div设为相对，这样它将赋予内容div的父元素高度。
在这种情况下，背景将始终采用父元素的高度和宽度，无论您可以放置??多少文本，背景都不会与页脚重叠。希望对您有帮助

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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 {
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
</head>
<body>







Hi
Hi
Hi
Hi
Hi



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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
}
1
2
3
4
5
6
7
               Hi
               Hi
               Hi
               Hi
           
         
 <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>

相关讨论