CSS проблема положения, когда у родительского элемента скрыто переполнение - PullRequest
Новая
       24

CSS проблема положения, когда у родительского элемента скрыто переполнение

0 голосов
/ 25 апреля 2020

В приведенном ниже фрагменте кода при нажатии на <div class="inner">Some Text</div> появится элемент overlay. Внутри наложенного элемента при щелчке по элементу span с классом 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/

1 Ответ

0 голосов
/ 25 апреля 2020

Проблема связана с вершиной: -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>
...