Позиционирование DIV в DIV

Question

У меня есть следующие ДИВ таблица:

<div style="display:table"> 
    <div style="display:table-row"> 
    <div style="display:table-cell"> 
     <div id="innerDiv"></div> 
    </div> 
    </div> 
</div> 

Внутри клетки есть DIV с идентификатором «innerDiv». Есть ли способ разместить этот div таким образом, чтобы его верхний/левый угол находился в любом месте ячейки? Я пробовал все значения позиции css, но никто не работает.

Answer 1

Мы не должны давать один и тот же элемент table-cell display и relative position. Он не поддерживается одинаково между современными браузерами (попробуйте это в FF).

Если это единственный способ сделать что-то в вашем конкретном случае, добавьте относительно расположенную оболочку div внутри ячейки.

Например:

<div style="display:table"> 
    <div style="display:table-row"> 
    <div style="display:table-cell"> 
     <div class="relativeDiv"> 
      <div id="innerDiv"></div> 
     </div> 
    </div> 
    </div> 
</div> 

.relativeDiv 
{ 
    height: 100%; 
    width: 100%; 
    /* You may need some negative margin 
     if there's a padding on the table cell */ 
    position: relative; 
} 

#innerDiv 
{ 
    position: absolute; 
    /* You're now free to set the top and left attributes freely */ 
} 

Для дальнейшего чтения:

• http://css-tricks.com/absolutely-position-element-within-a-table-cell/

• Does Firefox support position: relative on table elements?

Answer 2

Вы должны использовать положение объекта в космическом DIV явно (например: родственник, fiexd, абсолютное)

div { 
    position: relative; 
}; 

#innerDiv { 
    position: absolute; 
    left: 10px; 
}