CSS-переводчик родительский брат прячет ребенка

Question

Я использую ngx-datatable. Он использует transform: translate3d для позиционирования каждой строки, используя ее высоту. Проблема возникает, когда я помещаю раскрывающийся список внутрь и элемент под ним скрывает параметры раскрывающегося списка. Как показано на следующих изображениях:

Моя ngx-datatable конфигурация:

<ngx-datatable #chemicalResistanceGrid class="table-striped"
  [cssClasses]="..."
  [rows]="..."
  [count]="..."
  [limit]="..."
  [rowHeight]="68"
  [headerHeight]="40"
  [footerHeight]="40"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [columns]="gridColumns"
  [rowClass]="getRowClass"
  [columnMode]="'force'">
<!---->
</ngx-datatable>

Эти примеры упрощают моделирование моей проблемы:

---

Если я установлю элементы строки с последовательным z-index, дочерние элементы будут отображаться как:

row 0 element: (z-index: 100)
row 1 element: (z-index: 99)

Это решение не вариант. Мне нужен тот же результат, что и для подхода z-index, а для идеального решения необходимо также использовать CSS . Вот как должен выглядеть макет.

Спасибо заранее.

Это весь код симуляции и его фрагмент:

ul {
  background: #b6ff00;
  border-radius: 0 0 10px 10px;
}

li {
  list-style: none;
}

section.datatable-body {
  width: 1252px;
  height: 420px;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
  z-index: 10;
  display: block;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
}

section.datatable-selection {
  box-sizing: border-box;
}

section.datatable-scroller {
  height: 5576px;
  width: 1650px;
  display: inline-block;
  white-space: nowrap;
  box-sizing: border-box;
  box-sizing: border-box;
}

section.datatable-row-wrapper {
  position: absolute;
  background-color: #f9f9f9;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  box-sizing: border-box;
}

section.datatable-body-row {
  height: 68px;
  width: 1650px;
  white-space: nowrap;
  outline: none;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  box-sizing: border-box;
  direction: ltr;
}

section.datatable-row-center {
  width: 1650px;
  display: flex;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  flex-flow: row;
  box-sizing: border-box;
  white-space: nowrap;
}

section.datatable-body-cell {
  width: 150px;
  min-width: 200px;
  max-width: 600px;
  height: 68px;
  /**/
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  vertical-align: top;
  display: inline-block;
  line-height: 1.625;
  text-align: left;
  padding: .8rem 1.2rem .5rem;
  transition: width .3s ease;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
  -webkit-box-direction: normal;
}

section.datatable-body-cell-label {
  box-sizing: border-box;
  white-space: nowrap;
  display: block;
  line-height: 1.625;
  text-align: left;
  -webkit-box-direction: normal;
}

section.form-horizontal {
  box-sizing: border-box;
  margin: 0;
  outline: 0;
  color: #666;
  position: relative;
  display: block;
  line-height: 1.625;
  white-space: nowrap;
  text-align: left;
  -webkit-box-direction: normal;
}

section.ngx-select {
  -webkit-border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

section.ngx-select-dropdown {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: block !important;
  position: relative;
  text-align: left;
}

section.ul {
  width: 100%;
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
  margin-top: 0;
  position: absolute;
  border: 1px solid red;
  border-radius: 4px 4px;
  bottom: 5px;
  animation-name: flipInX;
  animation-fill-mode: both;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  list-style: none;
  font-size: 13px;
  text-align: left;
}

.li {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: list-item;
  text-align: -webkit-match-parent;
  border: 1px solid red;
}

<html>

<head>

</head>

<body>
  <section class="datatable-body">
    <section class="datatable-selection">
      <section class="datatable-scroller">


        <section class="datatable-row-wrapper" style="transform: translate3d(0px, 0px, 0px);backface-visibility: hidden;">
          <section class="datatable-body-row">
            <section class="datatable-row-center">
              <section class="datatable-body-cell">
                <section class="datatable-body-cell-label">
                  <section class="form-horizontal">
                    <section class="ngx-select">
                      <section class="ngx-select-dropdown">
                        <ul id="ul">
                          <li class="li">Test 1</li>
                          <li class="li">Test 2</li>
                          <li class="li">Test 3</li>
                          <li class="li">Test 4</li>
                          <li class="li">Test 5</li>
                          <li class="li">Test 6</li>
                          <li class="li">Test 7</li>
                          <li class="li">Test 8</li>
                          <li class="li">Test 9</li>
                          <li class="li">Test 0</li>
                        </ul>
                      </section>
                    </section>
                  </section>
                </section>
              </section>
            </section>
          </section>
        </section>


        <section class="datatable-row-wrapper" style="transform: translate3d(0px, 68px, 0px);backface-visibility: hidden;">
          <section class="datatable-body-row">
            <section class="datatable-row-center">
              <section class="datatable-body-cell">
                <section class="datatable-body-cell-label">
                  <section class="form-horizontal">
                    <section class="ngx-select">
                      <section class="ngx-select-dropdown">
                        <ul id="ul">
                          <li class="li">Test 1</li>
                          <li class="li">Test 2</li>
                          <li class="li">Test 3</li>
                          <li class="li">Test 4</li>
                          <li class="li">Test 5</li>
                          <li class="li">Test 6</li>
                          <li class="li">Test 7</li>
                          <li class="li">Test 8</li>
                          <li class="li">Test 9</li>
                          <li class="li">Test 0</li>
                        </ul>
                      </section>
                    </section>
                  </section>
                </section>
              </section>
            </section>
          </section>
        </section>

        <section class="datatable-row-wrapper" style="transform: translate3d(0px, 136px, 0px);backface-visibility: hidden;">
          <section class="datatable-body-row">
            <section class="datatable-row-center">
              <section class="datatable-body-cell">
                <section class="datatable-body-cell-label">
                  <section class="form-horizontal">
                    <section class="ngx-select">
                      <section class="ngx-select-dropdown">
                        <ul id="ul">
                          <li class="li">Test 1</li>
                          <li class="li">Test 2</li>
                          <li class="li">Test 3</li>
                          <li class="li">Test 4</li>
                          <li class="li">Test 5</li>
                          <li class="li">Test 6</li>
                          <li class="li">Test 7</li>
                          <li class="li">Test 8</li>
                          <li class="li">Test 9</li>
                          <li class="li">Test 0</li>
                        </ul>
                      </section>
                    </section>
                  </section>
                </section>
              </section>
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>
</body>

</html>

Answer 1

После некоторых исследований я обнаружил проблему. Ключевым моментом здесь является элемент transform (transform: translate3d (0px, Xpx, 0px)). В W3school есть примечание, которое обязывает использовать transform-style вместе с преобразованием. Поэтому, где бы я ни использовал преобразование, я ДОЛЖЕН использовать желаемый механизм в стиле преобразования; в этом случае preserve-3d, что означает, что дочерние элементы преобразованного элемента сохранят свою собственную позицию. Другая вещь, которую я заметил, это то, что z-index не работает для дочерних элементов преобразованного элемента. Для меня сработало преобразование: translateZ (1px).

Итак: скроллер базы данных -> добавлен стиль преобразования: preserve-3d datatable-row-wrapper -> сохраняет свое преобразование: translate3d (0px, xxpx, 0px) datatable-body-row.editMode (когда он находится в режиме редактирования) -> добавленное преобразование: translateZ (1px);

$(function () {
            $('.toggle-dropdown').on('click', function () {
                var drop = $(this).parents('.container').find('.element');
                var row = $(this).parents('.container').find('.row');
                $(row).toggleClass('editMode');
                $(this).html($(row).hasClass('editMode') ? '↑' : '↓');
            });
        });

 section.wrapper {
            position: relative;
            transform-style: preserve-3d;
        }

        section.container {
            position: absolute;
            transform-style: preserve-3d;
            height: 40px;
            width: 100%;
            background-color: aliceblue;
            z-index: 1000;
        }

        div.cell {
            width: 200px;
            padding: 10px;
            vertical-align: top;
            display: inline-block;
            position: relative;
        }

        div.editMode {
            transform: translateZ(10px);
        }

        ul.element {
            background-color: beige;
            list-style: none;
            z-index: 1000;
            margin: 0;
            padding-left: 5px;
            display: none;
            transition: visibility 0s, opacity 0.5s linear;
        }

            .editMode ul.element {
                display: block;
            }

        .icon {
            padding: 2px 5px;
            background-color: gray;
            border: 1px solid gray;
            border-radius: 5px;
            cursor: pointer;
        }

   <html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
</head>
<body>
    <section class="wrapper">
        <section id="row1" class="container" style="transform:translate3d(0px, 0px, 0px)">
            <div class="row">
                <div class="cell">
                    <input type="text" /><span class="toggle-dropdown icon">&darr;</span>
                    <ul class="element">
                        <li>element 1</li>
                        <li>element 2</li>
                        <li>element 3</li>
                    </ul>
                </div>
                <div class="cell">
                    <input type="text" />
                </div>
                <div class="cell">
                    <input type="text" />
                </div>
            </div>
        </section>
        <section id="row2" class="container" style="transform:translate3d(0px, 40px, 0px)">
            <div class="row">
                <div class="cell">
                    <input type="text" /><span class="toggle-dropdown icon">&darr;</span>
                    <ul class="element">
                        <li>element 1</li>
                        <li>element 2</li>
                        <li>element 3</li>
                    </ul>
                </div>
                <div class="cell">
                    <input type="text" />
                </div>
                <div class="cell">
                    <input type="text" />
                </div>
            </div>
        </section>
        <section id="row3" class="container" style="transform:translate3d(0px, 80px, 0px)">
            <div class="row">
                <div class="cell">
                    <input type="text" /><span class="toggle-dropdown icon">&darr;</span>
                    <ul class="element">
                        <li>element 1</li>
                        <li>element 2</li>
                        <li>element 3</li>
                    </ul>
                </div>
                <div class="cell">
                    <input type="text" />
                </div>
                <div class="cell">
                    <input type="text" />
                </div>
            </div>
        </section>
        <section id="row4" class="container" style="transform:translate3d(0px, 120px, 0px)">
            <div class="row">
                <div class="cell">
                    <input type="text" /><span class="toggle-dropdown icon">&darr;</span>
                    <ul class="element">
                        <li>element 1</li>
                        <li>element 2</li>
                        <li>element 3</li>
                    </ul>
                </div>
                <div class="cell">
                    <input type="text" />
                </div>
                <div class="cell">
                    <input type="text" />
                </div>
            </div>
        </section>
    </section>
</body>
</html>