Блог

Главная - Вопросы по программированию - ошибка z-индекса с переполнением

ошибка z-индекса с переполнением

#html #css

#HTML #css

Вопрос:

У меня возникли проблемы со следующими html и css, пытающимися заставить z-index удерживать мою вторичную панель поверх прокрутки, но по-прежнему статичной с ее содержимым.

JSFiddle — без полосы прокрутки: https://jsfiddle.net/kyp0gd2r/1 /

JSFiddle — с полосой прокрутки: https://jsfiddle.net/kyp0gd2r/2 /

HTML и CSS:

 body {
  background: green;
}

.single-pump-view-container-wrapper {
    position: relative;
    border: 3px solid purple;
    height: calc(100% - 3px);
}

.inner-wrapper {
    display: flex;
    margin: 0 0 0 1em;
    height: calc(100% - 2em - 3px);
    overflow: hidden;
}

.single-pump-controller {
  width: 290px;
  background: yellow;
}

.data-channel-panel-area {
  margin: 1em 10px 0 10px;
  width: 570px;
  background: blue;
  overflow-y: auto;
  overflow-x: hidden;
}

.container-wrapper {
  position: relative;
  width: 534px;
  margin-bottom: 18px;
}

.secondary-panel {
  position: absolute;
  left: calc(100% - 120px);
  top: 15px;
  width: 300px;
  height: 30px;
  background: red;
  z-index: 999;
}

.right-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    box-sizing: border-box;
    padding-right: 18px;
    padding-top: 1em;
    width: 100%;
    background: gray;
}

div {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}  
 <body>
  <div  style="padding: 0px 5px;height: calc(100% - 135px);">
    <div class="single-pump-view-container-wrapper">
      <div class="inner-wrapper">
          <div class="single-pump-controller">left</div>
          <div class="data-channel-panel-area">
            <div class="container-wrapper">
                <p>Title Goes Here</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
                <div class="secondary-panel">ssss</div>
            </div>
            <div class="container-wrapper">
                <p>Title Goes Here</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
                <div class="secondary-panel">ssss</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
            </div>
          </div>
          <div class="right-area"></div>
      </div>
    </div>
  </div>
</body>

Версия Stack-blitz: (Сделал это, чтобы проверить, что это не было угловым, вызывающим мою проблему, также ближе всего к фактическому коду)
https://stackblitz.com/edit/angular-ivy-wezlub?file=src/styles.css

Ответ №1:

В .data-channel-panel-area , overflow-y: auto; не может использоваться в сочетании с, например overflow-x: visible; . См. MDN:

Установка для одной оси значения visible (по умолчанию), а для другой — другого значения, приводит к visible тому, что поведение auto

auto будет прокручиваться при переполнении. Одной из альтернатив было бы установить обе оси visible равными, а затем реализовать собственную полосу прокрутки .data-channel-panel-area , хотя, возможно, не стоит заходить так далеко. Другим подходом может быть перемещение .secondary-panel элементов из .data-channel-panel-area , а затем позиционирование их с помощью события прокрутки JavaScript.

В любом случае, учтите, что может быть плохим UX, если элемент отображается над полосой прокрутки и, вероятно, не будет выглядеть хорошо.

Комментарии:

1. under определенно не будет хорошим, но over будет в порядке, это всплывающее окно не отображается постоянно. Я проверю mdn, спасибо. к сожалению, переполнение любого рода нарушает z-индекс, и я не знаю, как продвинуть его вверх по стеку.

Ответ №2:

Это решит вашу проблему

 var secondary_panel = document.getElementsByClassName('secondary-panel');

document.getElementsByClassName('data-channel-panel-area')[0].addEventListener('scroll', function() {
  var scrolled = this.scrollTop;

  if (scrolled >= 18 amp;amp; scrolled <= 231) {
    secondary_panel[0].style.position = "fixed";
    secondary_panel[0].style.top = scrolled * 0.0001   'px';
    secondary_panel[0].style.marginTop = "25px";
    secondary_panel[0].style.marginLeft = "-240px";
  } else {
    secondary_panel[0].style.position = "absolute";
    secondary_panel[0].style.top = '15px';
    secondary_panel[0].style.marginTop = "0px";
    secondary_panel[0].style.marginLeft = "0px";

  }

  if (scrolled >= 286 amp;amp; scrolled <= 490) {
    secondary_panel[1].style.position = "fixed";
    secondary_panel[1].style.top = scrolled * 0.0001   'px';
    secondary_panel[1].style.marginTop = "25px";
    secondary_panel[1].style.marginLeft = "-240px";
  } else {
    secondary_panel[1].style.position = "absolute";
    secondary_panel[1].style.top = '15px';
    secondary_panel[1].style.marginTop = "0px";
    secondary_panel[1].style.marginLeft = "0px";
  }

})  
 body {
  background: green;
}

.single-pump-view-container-wrapper {
  position: relative;
  border: 3px solid purple;
  height: calc(100% - 3px);
}

.inner-wrapper {
  display: flex;
  margin: 0 0 0 1em;
  height: calc(100% - 2em - 3px);
  overflow: hidden;
}

.single-pump-controller {
  width: 290px;
  background: yellow;
}

.data-channel-panel-area {
  margin: 1em 10px 0 10px;
  width: 570px;
  background: blue;
  overflow-y: auto;
  overflow-x: hidden;
}

.container-wrapper {
  position: relative;
  width: 534px;
  margin-bottom: 18px;
}

.secondary-panel {
  position: absolute;
  left: calc(100% - 120px);
  top: 15px;
  width: 300px;
  height: 30px;
  background: red;
  z-index: 999;
}

.right-area {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  box-sizing: border-box;
  padding-right: 18px;
  padding-top: 1em;
  width: 100%;
  background: gray;
}

div {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}  
 <body>
  <div style="padding: 0px 5px;height: calc(100% - 135px);">
    <div class="single-pump-view-container-wrapper">
      <div class="inner-wrapper">
        <div class="single-pump-controller">left</div>
        <div class="data-channel-panel-area">
          <div class="container-wrapper">
            <p>Title Goes Here</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur
              a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt
              mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a
              odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
            <div class="secondary-panel">ssss</div>
          </div>
          <div class="container-wrapper">
            <p>Title Goes Here</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur
              a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt
              mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a
              odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
            <div class="secondary-panel">ssss</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur
              a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt
              mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a
              odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
          </div>
        </div>
        <div class="right-area"></div>
      </div>
    </div>
  </div>
</body>

Комментарии:

1. Очень хорошая попытка и очень благодарная, но результат, который я ищу, — это красная полоса с наивысшим z-индексом и за пределами прокрутки. смотрите без полосы прокрутки для получения желаемого результата, но с прокруткой.

2. @Crash1hd просто удалите свойство преобразования в классе data-channel-panel-area

3. Это помещает его сверху, но при прокрутке он движется в противоположном направлении и смещается вправо

4. @Crash1hd также измените secondary_panel.style.top = scrolled ‘px’; на scrolled* 0.00001 ‘px’; для обоих индексов

5. Это оставляет его в правом верхнем углу, но оно не исчезает при прокрутке экрана и не находится на своем месте в синей области. 🙂 я удивлен, что нет способа сделать это только с помощью css. по сути, переполнение сбрасывает z-индекс, и я, похоже, не могу найти способ это изменить. (Удалите переполнение, и это даст мне результат, который я хочу, просто нужно добавить в прокрутку для синей области)