在下面的代码片段中，单击<div class="inner">Some Text</div>将显示一个overlay元素。在overlay元素内部，单击类为popoutTerm的span元素将显示popoutDialog元素。
问题是popoutDialog元素不是完全可见的，它只能在overlay元素内显示的部分内容是可见的。我知道这个问题是由于应用于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;
}
https://jsfiddle.net/a6v04bLr/
问题是由于顶部：-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>