абсолютное деление внутри абсолютное деление отсекается относительно относительного положения - PullRequest
Новая
       23

абсолютное деление внутри абсолютное деление отсекается относительно относительного положения

2 голосов
/ 26 сентября 2019

У меня есть 3 div друг над другом, имеющие следующие css. 

.d1 {
    position: relative;
    background-color: yellow;
    height: 50px;
    width: 100px;
    overflow: hidden;
}

.d2 {
    position: absolute;
    background-color: green;
    height: 25px;
    width: 50px;
}

.d3 {
    position: absolute;
    left: 83px;
}

, и div, которые имеют классы, следующие: 

<div class="d1">
  <div class="d2">
    <div class="d3">text</div>
  </div>
</div>

и в результате я вижусодержимое d3 отключено из-за переполнения: скрыто в d1.

enter image description here

Как можно избежать отключения содержимого d3 без изменения d1?

1 Ответ

0 голосов
/ 26 сентября 2019

Обход переполнения ..

Элемент может переполниться от позиционированного родительского элемента relative или absolute, установив его position в fixed.Элемент с position: fixed будет иметь стили по умолчанию left, right, top и bottom, установленные как auto.Это поместит .d3 в верхний левый угол .d2, а затем стиль left: 83px отодвинет его влево оттуда.

Освободив дополнительное пространство ..

Однако, чтобы получить это дополнительное движение вправо в качестве исходной разметки, вам нужно будет добавить margin-left: 8px, который будет составлять дополнительное~ 8 пикселей, необходимых для копирования оригинала.Дальнейшие корректировки позиции .d3 необходимо выполнить, установив стиль margin ( см. Ниже ).

Ваш обновленный код должен выглядеть следующим образом .. 

.d1 {
   position: relative;
   background-color: yellow;
   height: 50px;
   width: 100px;
   overflow: hidden;
}

.d2 {
  position: absolute;
  background-color: green;
  height: 25px;
  width: 50px;
}

.d3 {
 position: fixed;
 margin-left: 8px;
 left: 83px;
}

Некоторые соображения и предостережения ..

Как уже упоминалось ранее, комментатор рекомендовал бы исправить вашу HTML-разметку, потому что это решение может вызвать проблемы, если вам когда-либо понадобится переместить позицию * 1032.*.Например, установка left, right, top или bottom приведет к тому, что настройка по умолчанию для этого стиля, auto, будет не установлена, и элемент будет расположен относительно области просмотра, а неродительский relative или absolute элемент.

...