CSS position 当父元素隐藏溢出时出现问题

Question

In the below code snippet, on clicking the <div class="inner">Some Text</div> will show up a overlay element.在下面的代码片段中，单击<div class="inner">Some Text</div>将显示一个overlay元素。 Inside overlay element, on clicking the span element with class popoutTerm will show up the popoutDialog element.在 overlay 元素内，单击带有 class popoutTerm的 span 元素将显示popoutDialog元素。

The issue is popoutDialog element is not fully visible, only partially portion of what ever it can display inside the overlay element is visible.问题是popoutDialog元素不完全可见，它在overlay元素内显示的内容只有部分可见。 I understood that the issue is due to overflow property applied to overlay element.我知道这个问题是由于 overflow 属性应用于overlay元素。 But the requirement is overlay element should be scrollable if it has more content and popoutDialog element should be relative to popoutTerm element.但要求是覆盖元素应该是可滚动的，如果它有更多的内容，并且popoutDialog元素应该相对于popoutTerm元素。

Please help me to understand and resolve it.请帮助我理解并解决它。 Thanks in advance.提前致谢。

HTML Code 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 Code 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/ https://jsfiddle.net/a6v04bLr/

Answer 1

Issue is due to top: -50px;问题是由于 top: -50px; change the value as -10px将值更改为 -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>

CSS position 当父元素隐藏溢出时出现问题

问题描述

1 个解决方案

解决方案1
0 2020-04-24 22:53:04

CSS position 当父元素隐藏溢出时出现问题

问题描述

1 个解决方案

解决方案1 0 2020-04-24 22:53:04

解决方案1
0 2020-04-24 22:53:04