Блог

Главная - Вопросы по программированию - Z-индекс не укладывается

Z-индекс не укладывается

#html #css #sass

#HTML #css — файл #sass #css

Вопрос:

Я так долго пытался, прочитал несколько статей и до сих пор ничего не понимаю! Я пытаюсь переместить этот маленький значок слева от заголовка, но по какой-то причине он располагается под родительским элементом!

это мой css: 

         .step__content {
            margin-top: 120px;
            position: relative;

            div.ui-accordion-header {
                margin-left: 30px;

                amp;:after {
                    content: '';
                    position: absolute;
                    height: 20px;
                    width: 20px;
                    left: -7px;
                    background-image: url('../images/i.svg');
                    z-index: 100;
                }
            }
        }

вот html:
введите описание изображения здесь

первое: после элемента находится значок!

вот изображение:

введите описание изображения здесь

Я хочу, чтобы значок был слева от заголовка! Но когда я нажимаю на нее влево, она опускается ниже? Полное изображение значка не видно, потому что половина находится под ним!

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

1. Пожалуйста, включите HTML в свой js fiddle

2. Можете ли вы пояснить, что вы подразумеваете под «укладкой под родительским элементом»? Глядя на ваш пример изображения, значок явно находится «над» текстом с точки зрения z-индекса (часть «A» скрыта цветом значка), а значок находится «над» текстом с точки зрения вертикальной компоновки

3. @Vlad274 Да, это нормально, это над текстом! Когда я нажимаю на него влево, он перемещается ниже.шаг__содержание! Я добавил другое изображение, возможно, это имеет больше смысла!

Ответ №1:

Я думаю, что на самом деле происходит то, что псевдоэлемент просто выходит за пределы overflow: hidden; элемента…

Это работает для меня (даже если вы удалите стили z-index). Как вы можете видеть, элемент psuedo находится над текстом. Попробуйте изменить :after z-index на -5, и он опустится ниже.

 .step__content {
  margin-top: 120px;
  position: relative;
}

.ui-accordion-header {
  position: relative;
  margin-left: 50px;
  z-index: 1;
}

.ui-accordion-header:after {
  content: '';
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: -20px;
  background-image: url('https://via.placeholder.com/150');
  background-size: cover;
  background-position: center;
  z-index: 5;
}  
 <div class="step__content">
  <div class="ui-accordion-header">
    <p>Headers</p>
  </div>
</div>

Ответ №2:

Вместо этого я использую псевдоэлемент before.

   .step__content {
            margin-top: 120px;
            position: relative;

            div.ui-accordion-header {
                margin-left: 30px;

                amp;::before {
                    content: 'testing';
                    height: 20px;
                    width: 20px;
                    z-index: 100;

                }
            }
        }
  
 <div class="step__content">

<section class="ce_accordionStart ce_accordino block">
  <div id="ui-id-1" class="ui-accordion-header ui-accordion-header-active ui-state-active">

  <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">
    Header
  </span>
  </div>
</section>
</div>