Проблема с позиционированием с помощью bottom (решено)

260

15 декабря 2016, 16:20

Всем привет. есть у меня элемент с абсолютным позиционированием внутри контейнера в котором мефа подружается динамически. Что примечательно: если я его двигаю с помощью изменения показателя top, то он нормально перемещается(опускается) внутри контейнера, но если хочу сдвинуть с помощью bottom то ничего не выходит.. Изначально при задании bottom=0 (top при этом не инициализирован) элемент сдвигается на пикселей 15 относительно начала и больше не двигается при задании ему значений. А т.к. контент формируется динамически - мне нужно позиционировать именно снизу контейнера. Что скажите?

.product-frame { 
  position: relative; 
} 
.view-grid-center .description-table { 
  position: absolute; 
  left: auto; 
  right: 6px; 
  bottom: 0; 
  top:auto; 
  width: 125px; 
  margin-bottom: 0; 
}

<div class="view-grid-center"> 
<div class="product-frame"> 
  <table class="description-table"> 
    <tbody> 
      <tr> 
        <td class="product-quantity"> 
          <div class="quantity buttons_added"> 
            <input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4"> 
            <span>порц.</span> 
            <input type="button" value="+1" id="button_plus" class="plus"> 
            <input type="button" value="-1" id="button_minus" class="minus"> 
          </div> 
        </td> 
      </tr> 
    </tbody> 
  </table> 
</div> 
</div>

Вопрос решен - нужно было добавить top:auto;, тк.к был стиль приоритетом ниже, который определял положение блока, несмотря на мой bottom

Answer 1

Обновлённый ответ

У вас внешние блоки (.view-grid-center и .product-frame) имеют нулевую высоту.

Соответственно, когда вы позиционируете таблицу, используя bottom, то низ таблицы «прилепляется» к низу внешнего блока (с position: relative). Таким образом, всё съезжает выше, чем при использовании top.