Скрытое переполнение приводит к тому, что div находится под плавающим div, а не за ним

ProgramBox

Скрытое переполнение приводит к тому, что div находится под плавающим div, а не за ним

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#html #css #css-float #overflow

#HTML #css #css-float #переполнение

Вопрос:

В настоящее время у меня такая ситуация: два div s рядом друг с другом (под одним контейнером div), один плавающий слева, а другой занимает 100% своего родительского элемента.

Я также хочу, чтобы полоса прокрутки была скрыта, но содержимое останется обрезанным (удалось добиться этого с overflow: hidden помощью). Однако, когда я использовал overflow: hidden , плавающее расположение изменилось, и div оказался под плавающим.

Это фрагмент иерархии со скрытием полосы прокрутки и без нее:

 .d1{
    background: red;
    height: 100%;
    width: 20px;
    position: relative;     
    transition: width 0.5s;
    float: left;
}

.cont{
    height: 50px;
    width: 100px;
    background: yellow;
}

.d2{
    background: blue;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.d3{
    background: blue;
    height: 100%;
    width: 100%;
}

 <h1>Without overflow:</h1>
<div class="cont">
  <div class="d1"></div>
  <div class="d3"></div>
</div>

<h1>With overflow:</h1>
<div class="cont">
  <div class="d1"></div>
  <div class="d2"></div>
</div>

Я хотел бы соответствовать обоим ограничениям (плавающий с одним div позади другого со 100% занятием родительской и скрытой полосой прокрутки, но остается обрезанным).

Я смог достичь желаемого результата, используя position: absolute или css grid , но я хочу избежать этих решений.

Спасибо.

Ответ №1:

Вместо overflow:hidden использования clip-path:inset(0) . Оба должны приводить к одному и тому же результату путем обрезки переполненного содержимого

 .d1 {
  background: red;
  height: 100%;
  width: 20px;
  position: relative;
  z-index:1;
  transition: width 0.5s;
  float: left;
}

.cont {
  height: 50px;
  width: 100px;
  background: yellow;
}

.d2 {
  background: blue;
  clip-path:inset(0);
  height: 100%;
  width: 100%;
}

 <h1>With overflow:</h1>
<div class="cont">
  <div class="d1"></div>
  <div class="d2"></div>
</div>

1. Спасибо за ответ. Клип был наполовину полезен, scorllbar все еще появляется, а также занимает высоту, равную полному содержимому d2 вместо 20 пикселей

2. Вот пример, полоса прокрутки отображается во всем окне: codepen.io/avis-js/pen/PozqwaM

3. На самом деле, при создании этого примера я столкнулся с другой проблемой (даже с overflow: hidden) — текст не находится за d1.

4. @SomoKRoceS просто добавьте overflow: hidden; в .продолжение

5. @SomoKRoceS не единственный вариант, но самый логичный и простой здесь. Я не знаю, почему вы не хотите его использовать (как сказано в вопросе), но он делает именно то, что вы хотите… на самом деле не заслуживает нового вопроса. Либо объясните, почему вы не можете / не хотите использовать absolute, либо просто примите тот факт, что он наиболее подходит среди всех других хаков

Ответ №2:

Я хотел бы немного объяснить, почему у вас проблема с overflow hidden.

Без overflow: hidden

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

Почему d1 находится перед d3? Это связано с тем, что для d1 установлено значение position: relative и float, что делает его более упорядоченным в стеке.

С overflow: hidden

Использование свойства overflow со значением, отличным от visible (по умолчанию), создаст новый контекст форматирования блока, и он не будет перекрываться с элементом float, вместо этого он будет следовать за предыдущим элементом.

Например, если установить ширину d2 меньше 80 пикселей (100-20), d2 получит d1

 .d1 {
  background: red;
  height: 100%;
  width: 20px;
  position: relative;
  transition: width 0.5s;
  float: left;
}

.cont {
  height: 50px;
  width: 100px;
  background: yellow;
}

.d2 {
  background: blue;
  overflow: hidden;
  height: 100%;
  width: 80px;
}

 <h1>With overflow:</h1>
<div class="cont">
  <div class="d1"></div>
  <div class="d2"></div>
</div>