Не удается заставить работать с максимальной шириной при использовании абсолютного позиционирования - PullRequest
Новая
       64

Не удается заставить работать с максимальной шириной при использовании абсолютного позиционирования

0 голосов
/ 17 мая 2019

Я не могу заставить max-width работать при использовании абсолютного позиционирования. В https://jsfiddle.net/jn2bs6ax/ элемент должен иметь как можно меньшую ширину, вплоть до максимальной ширины 1000 пикселей. Но он занимает ширину около 50% и переносит текст. Как заставить это работать? Если я установлю для max-width что-то маленькое, например 300px, оно будет работать, но все, что больше его ширины, в настоящее время не вызывает его расширения.

В этом примере просто показан элемент, который был абсолютно позиционирован по центру ниже элемента, но я использую transform, top, bottom, left и right для позиционирования вещи во всех 4 направлениях относительно предмета. Решение должно работать со всеми 4 случаями.

Есть похожий вопрос CSS (позиция: абсолютная + левая: 50% = максимальная ширина: 50%)? но ответ работает только с центрированием ниже, но не для всех случаев, таких как позиционирование справа от объект вертикально по центру. 

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

1020 * CSS * 

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 100%;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

Ответы [ 3 ]

0 голосов
/ 17 мая 2019

Попробуйте добавить width: 100%; для вашего класса по максимальной ширине в любом месте. 

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>
0 голосов
/ 17 мая 2019

Как вы уже заметили, проблема связана с left:50%, который ограничит ширину элемента до 50% родительского элемента.

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

.relative {
  position: relative;
  padding:0 50%;
  margin:0 -50%;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 800px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}


.hide {
 overflow:hidden;
 height:500px;
}
<div class="hide">
<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
  <div class="absolute" style="top:200px;">Lorem ipsum dolor sit amet</div>
</div>
</div>
0 голосов
/ 17 мая 2019

Попробуйте установить display: inline-table; или display: table;

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-table;
}
<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>
...