在下面的代码片段中，当点击 <div class="inner">Some Text</div> 会出现 overlay 元素。在叠加元素内部，点击类为 popoutTerm 会出现 popoutDialog 元素。
问题是 popoutDialog 元素不是完全可见的，只是部分地显示它在 overlay 元素是可见的。我的理解是，这个问题是由于应用于 overlay 元素。但要求覆盖元素应该是可滚动的，如果它有更多的内容和 popoutDialog 元素应相对于 popoutTerm 元素。
请帮我理解和解决。先谢谢你。
HTML代码
<body>
<div style="height:300px;border:1px solid red">Sample Content</div>
<div class="outer">
<div> A </div>
<div> B </div>
<div> C </div>
<div class="inner">Some Text</div>
<div class="overlay">Overlay <span class="popoutTerm">Content <div class="popoutDialog"> popout content </div></span> to display</div>
<div>D</div>
</div>
</div>
<script>
let outerElement = document.querySelector('.outer');
let innerElement = document.querySelector('.inner');
let overlayElement = document.querySelector('.overlay');
let popoutTermElement = document.querySelector('.popoutTerm');
let popoutDialogElement = document.querySelector('.popoutDialog');
innerElement.onclick = function (e) {
console.log('click called');
overlayElement.style.display = 'block';
overlayElement.style.position = 'absolute';
overlayElement.style.top = '50px';
overlayElement.style.left = '50px';
e.stopPropagation();
}
popoutTermElement.onclick = function () {
popoutDialogElement.style.display = 'block';
}
</script>
</body>
CSS代码
.outer {
height: 700px;
border: 1px solid black;
position: relative;
}
.inner {
cursor: pointer;
border: 1px solid blue;
height: 200px;
}
.overlay {
display:none;
height: 500px;
width: 300px;
background-color: green;
color: white;
overflow: auto;
}
.popoutTerm {
color: orange;
cursor: pointer;
position: relative;
}
.popoutDialog {
background-color: red;
color: white;
height: 100px;
width: 100px;
display: none;
position: absolute;
top: -50px;
left: 50px;
}
问题是由于top: -50px，将其改为-10px。
.outer {
height: 700px;
border: 1px solid black;
position: relative;
}
.inner {
cursor: pointer;
border: 1px solid blue;
height: 200px;
}
.overlay {
display:flex;
height: 500px;
width: auto;
background-color: green;
color: white;
overflow: auto;
}
.popoutTerm {
color: orange;
cursor: pointer;
position: relative;
}
.popoutDialog {
background-color: red;
color: white;
height: 100px;
width: 100px;
display: none;
position: absolute;
top: -10px;
left: 40px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Utf-8" />
<meta name="viewport" content="width-device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>WonderWoman</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div style="height:300px;border:1px solid red">Sample Content</div>
<div class="outer">
<div> A </div>
<div> B </div>
<div> C </div>
<div class="inner">Some Text</div>
<div class="overlay">Overlay <span class="popoutTerm">Content <div class="popoutDialog"> popout content </div></span> to display</div>
<div>D</div>
</div>
</div>
<script>
let outerElement = document.querySelector('.outer');
let innerElement = document.querySelector('.inner');
let overlayElement = document.querySelector('.overlay');
let popoutTermElement = document.querySelector('.popoutTerm');
let popoutDialogElement = document.querySelector('.popoutDialog');
innerElement.onclick = function (e) {
console.log('click called');
overlayElement.style.display = 'block';
overlayElement.style.position = 'absolute';
overlayElement.style.top = '50px';
overlayElement.style.left = '50px';
e.stopPropagation();
}
popoutTermElement.onclick = function () {
popoutDialogElement.style.display = 'block';
}
</script>
</body>
</html>