父元素隐藏溢出时的CSS位置问题答案

【问题标题】：CSS position issue when parent element has overflow hidden父元素隐藏溢出时的CSS位置问题
【发布时间】：2024-01-13 06:42:01
【问题描述】：

在下面的代码 sn-p 中，单击<div class="inner">Some Text</div> 将显示overlay 元素。在覆盖元素内部，单击类为popoutTerm 的span 元素将显示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;
        }

https://jsfiddle.net/a6v04bLr/

【问题讨论】：

我不确定是什么问题。如果您更改尺寸（jsfiddle.net/akmdq13u）以强制滚动，我认为它的工作原理是预期的。
是的，没错。但我需要将其显示在弹出项的顶部，并且如果弹出对话框内容更多，则整个对话框将不可见。
但它在 popoutTerm 的顶部，您可以滚动查看其余内容，根据您的要求。

标签： javascript html css css-position overflow

【解决方案1】：

问题是由于 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>

【讨论】：