2

Подскажите, пожалуйста - как сделать блок с абсолютно-позиционированным содержимым внутри обтекаемым со всех сторон? Если через col ограничивать ширину, то по бокам от него всё нормально. Но при попытке добавить содержимое снизу - всё сползается.

Сам блок :

<div class="col-8">

            <img src="/content/builder/topka/drova/Biancone.png" id="topka" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">
            <img src="/content/builder/krysha/1/Biancone.png" id="krysha" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">
            <img src="/content/builder/podium/1/Biancone.png" id="podium" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">
            <img src="/content/builder/piliastr/1/Biancone.png" id="piliastr" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">
            <img src="/content/builder/friz/1/Biancone.png" id="friz" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">

    </div>
5
  • 1
    Абсолютно позиционированные элементы не могут быть обтекаемыми, потому что они в принципе выпадают из потока и взаимодействуют только с релятивно позиционированным родителем. 19 янв 2018 в 11:11
  • Суть в том, что картинки перечисленные здесь накладываются одна на одну, для этого я и использовал абсолютное позиционирование. Не подскажете как по-другому решить проблему?
    – RedScreed
    19 янв 2018 в 11:14
  • Как вы хотите , чтобы ваши картинки выглядели внутри этого блока? 19 янв 2018 в 11:27
  • Так, чтобы они накладывались одна на одну - по размерам всё подогнано. И чтобы сам блок нормально обтекался со всех сторон.
    – RedScreed
    19 янв 2018 в 11:49
  • Подумал - может сделать пустой блок под высоту абсолютного. Но даже за отсутствием опыта в вёрстке мне кажется что это не самая удачная идея) Может есть варианты получше?
    – RedScreed
    19 янв 2018 в 11:59

1 ответ 1

2

Сложно понять, что именно не так в вашей верстке по этому обрывистому коду. Добавляете ли вы остальной текст в другую колонку или в эту же? В чем суть назначения наложенных картинок? Если фиксированная ширина, то какая? Как вы обеспечиваете адаптивность?

Внутри колонки бутсрапа не может быть абсолютно позиционированного элемента. Точнее может быть, но из потока выпадать точно будет, если вы не зададите отступ грида. Плюс ко всему эта колонка не будет иметь высоты. Для того, чтобы задать высоту и позиционироваться правильно создайте обертку для ваших изображений, задайте ей вашу фиксированную высоту(например 100px), сделайте ее родителем и ограничьте по ширине:

.img-container {
  position: relative;
  height: 100px;
  max-width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="img-container"> <img src="https://dtpmhvbsmffsz.cloudfront.net/users/2015/12/02/565f89fa9f91f6d0ff001aae/t_565fb86d6258507629025e44.jpg" id="topka" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">
        <img src="https://gamefaqs.akamaized.net/box/3/0/0/264300_thumb.jpg" id="krysha" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">
        <img src="http://эксклюзив-л.рф/images/phocagallery/Vodopadi/thumbs/phoca_thumb_m_vodopad1.jpg" id="podium" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">
        <img src="https://otvetytut.ru/uploads/photo_83216_medium.jpg" id="piliastr" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">
        <img src="https://l-userpic.livejournal.com/92950573/21156278" id="friz" alt="тег" style="position: absolute; top: 0; left: 0; width: 100%;">
      </div>
    </div>
  </div>
</div>

Но подозреваю, что вам нужно менять фон на полную ширину, тогда вам больше подойдет background-image:

.img-container {
  position: relative;
  height: 100px;
  max-width: 100%;
}

.img-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="img-container">
        <div id="topka" class="img-item" style="background-image:url(https://dtpmhvbsmffsz.cloudfront.net/users/2015/12/02/565f89fa9f91f6d0ff001aae/t_565fb86d6258507629025e44.jpg)"></div>
        <div id="krysha" class="img-item" style="background-image:url(https://gamefaqs.akamaized.net/box/3/0/0/264300_thumb.jpg)"></div>
        <div id="podium" class="img-item" style="background-image:url(http://эксклюзив-л.рф/images/phocagallery/Vodopadi/thumbs/phoca_thumb_m_vodopad1.jpg"></div>
        <div id="piliastr" class="img-item" style="background-image:url(https://otvetytut.ru/uploads/photo_83216_medium.jpg"></div>
        <div id="friz" class="img-item" style="background-image:url(https://l-userpic.livejournal.com/92950573/21156278"></div>
      </div>
    </div>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.