Ответ 1

Абсолютное позиционирование выводит элемент из нормального потока документов и, следовательно, не взаимодействует с другими элементами. Возможно, вам стоит подумать, как позиционировать его с помощью float, и спросите об этом здесь, в Stack Overflow, если вы застряли:)

Ответ 2

Я знаю, что это более старый вопрос, но я наткнулся на это, пытаясь сделать то, что, как я считаю, вы пытаетесь сделать. Я сделал решение, используя: перед селектором CSS, поэтому он не велик с ie6-7, но во всем остальном вы должны быть хорошими.

В принципе, поместив мое изображение в div, я могу добавить длинный блок float перед рукой, чтобы поднять его, и текст обернулся вокруг него!

img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;

}

Вы можете проверить это здесь:

http://codepen.io/atomworks/pen/algcz

Ответ 3

Когда вы позиционируете div абсолютно, вы эффективно вынимаете его из потока документов, так что другие элементы будут действовать так, как если бы он не был.

Чтобы обойти это, вы можете использовать поля:

.myDivparent
{
   float: left;
   background: #f00;
}

.myDivhascontent
{
   margin-left: 10px; /*right, bottom, top, whichever you need*/
}

Надеюсь, что это сделает трюк:)

Ответ 4

Как уже упоминалось @Kyle Sevenoaks, вы берете абсолютный позиционный контент из потока документов.

Насколько я вижу, единственный способ, чтобы родительский div обертывал абсолютное позиционное содержимое, заключается в использовании javascript для установки ширины и высоты при каждом изменении.

Ответ 5

По моему мнению, черта "Абсолют" плохо названа, потому что ее позиция фактически относительно первой родительской позиции не статична.

<div class="floated">
 <div style="position: relative;">
  <div class="AbsoluteContent">
    stuff
  </div>
 </div>
</div>

Ответ 6

Я думаю, что лучший вариант - добавить дополнительный div после содержимого float, но все еще внутри родителя, чтобы очистить предыдущие стили.

<div class="clear"></div>

И CSS:

.clear
{clear:both;}

Ответ 7

Мне нужно было подобное решение, чтобы вывести выдвижную цитату (а не изображение), в которой был бы текст переменной длины. Вытягивающую цитату нужно было вставить в HTML сверху (вне потока текста) и поместить в контент с текстом, который оборачивается вокруг него. Модифицируя ответ Леонарда выше, есть действительно простой способ сделать это!

См. Codepen для рабочего примера: https://codepen.io/chadwickmeyer/pen/gqqqNE

CSS

/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
  content: '' ;
  display:block;
  float: right;
  /* The height is essentially a "margin-top" to push the pullout Container down page */
  height: 200px;
}

.pulloutContainer q {
  float:left;  
  clear:both;
  /* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
  width: 30%;
  /* Add padding as you see fit */
  padding: 50px 20px;
}

HTML

<div id="container">

  <div class="pulloutContainer">
      <!-- Pullout Container Automatically Adjusts Size -->
      <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
    </div>

    <div class="content">
       <h1>Sed Aucteor Neque</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</

      ...INSERT MORE TEXT HERE...

  </div>
</div>

Ответ 8

Абсолютное позиционирование не позволяет обернуть текст. Вы должны использовать float и position, используя margin или padding.

Ответ 9

Вот трюк, который может сработать для некоторых:

если у вас есть контейнер, упакованный с большим количеством объектов, и вы хотите, чтобы этот позиционированный объект отображался высоко в определенных случаях, а ниже в других случаях (например, различные размеры экрана), то просто промежуточные копии объекта несколько раз в вашем html, либо inline(-block), либо float, а затем display:none элементы, которые вы не хотите видеть в соответствии с условиями, которые вам нужны.

Вот JSFiddle, чтобы точно показать, что я имею в виду: JSFiddle правильного позиционирования высокого и низкого

Примечание. Я добавил цвет только для эффекта. За исключением названий классов, объекты-1 и субъект-2 в противном случае являются точными копиями друг друга.

Ответ 10

Существует легкое решение этой проблемы. Он использует белое пространство: nowrap;

<div class="position:relative">
 <div style="position: absolute;top: 100%; left:0;">
  <div style="white-space:nowrap; width: 100%;">
    stuff
  </div>
 </div>
</div>

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

<ul class="submenu" style="position:absolute; z-index:99;">
   <li style="width:100%; display:block;">
      <a href="#" style="display: block;width: 100%;white-space: nowrap;">Dropdown link here</a>
   </li>
<ul>

Примеры изображений

Без Nowrap включен

Включен Nowrap

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