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

Question

在下面的代码片段中，单击<div class="inner">Some Text</div>将显示一个overlay元素。 在 overlay 元素内，单击带有 class popoutTerm的 span 元素将显示popoutDialog元素。

问题是popoutDialog元素不完全可见，它在overlay元素内显示的内容只有部分可见。 我知道这个问题是由于 overflow 属性应用于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/

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

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