时间戳

首页 > 解决方案 > 父元素隐藏溢出时的CSS位置问题

javascript - 父元素隐藏溢出时的CSS位置问题

问题描述

在下面的代码片段中，单击<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;
        }

https://jsfiddle.net/a6v04bLr/

标签： javascripthtmlcsscss-positionoverflow

解决方案

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

推荐阅读