CSS позиционирование внутри HTML-таблицы

Question

Я чувствую, что это не должно быть ежу понятно, но ясно, что я что-то не хватает ...

Я застрял с HTML-таблицы на странице и необходимо абсолютно позиционируйте элемент, который отображается внутри таблицы, чтобы он отображался правильно, когда мы применяем DHTML для его отображения.

Я попытался полностью позиционировать его относительно нижней части таблицы, но браузер (FF и IE) не будет относить его относительно строки. Вместо этого он принимает позиционирование относительно следующего родителя над строкой, которая имеет относительное позиционирование.

В основном это:

<table> 
<tr class="aRelativelyPositionedClass"> 
    <td> 
     <div class="anAbsolutelyPositionedClass">stuff I want to absolutely position</div> 
    </td> 
</tr> 
</table> 

Можно ли расположить внутренний DIV по отношению к ряду? Или есть проблема с HTML, которую я пропускаю с таблицами?

Answer 1

Я не думаю, что вы можете поместить его относительно строки, так как строка на самом деле не является видимым элементом.

Вы должны иметь возможность расположить его относительно ячейки, установив в ячейке стиль position:relative, чтобы сделать его слоем. Тем не менее, ячейка не является независимым элементом, поэтому вам, возможно, придется поместить другой элемент в ячейку и сделать слой вместо этого, чтобы он работал правильно.

(Таблицы проблематичны для разметки, если объединить его с другими методами ... Возможно, следует удалить таблицу altogehter ...)

Answer 2

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

Редактировать: Я думаю, что Гуффа правильный. Только с одним div в ячейке я не мог заставить его позиционировать относительно строки или ячейки. Я думаю, вы могли бы подделать эффект, который вы ищете, добавив некоторые разметки:

<table border="1"> 
    <tr style="position:relative;"> 
     <td><img src="http://sstatic.net/so/img/so/logo.png" height="61px" width="250px" alt=""/></td> 
     <td> 
      <div style="position: relative; height: 100px; width: 100px;"> 
       <div style="border: 1px solid red; position: absolute; bottom: -10px; left -10px;">Position me</div> 
      </div> 
     </td> 
    </tr> 
</table> 

Answer 3

попробовать в CSS

.aRelativelyPositionedClass td { 
    // your style 
} 

Я считаю, что вы должны явно указать относительный тоже.

Answer 4

Вставьте это в файл, чтобы посмотреть, как это делается.

Не забудьте установить размер контейнера. Я сделал это в HTML здесь, чтобы сохранить пример коротким, но вы должны сделать это в CSS.

<table border="1" width="500"> 
<tr height="200"> 
    <td> 
     <div style="position:relative;top:20;left:20">stuff I want to position</div> 
     <div style="position:relative;top:30;left:30">stuff I want to position</div> 
     <div style="position:relative;top:40;left:40">stuff I want to position</div> 
     <div style="position:relative;top:50;left:50">stuff I want to position</div> 
    </td> 
</tr> 
<tr height="200"> 
    <td> 
     <div style="position:relative;top:20;left:20">stuff I want to position</div> 
     <div style="position:relative;top:30;left:30">stuff I want to position</div> 
     <div style="position:relative;top:40;left:40">stuff I want to position</div> 
     <div style="position:relative;top:50;left:50">stuff I want to position</div> 
    </td> 
</tr> 
</table> 

Answer 5

CSS 2.1 Specification:

Эффект «позиции: relative 'on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, Элементы таблицы и элемента таблицы не определено.

Таким образом, браузеры возвращаются к следующему родительскому устройству, поведение которого считается определенным: table.

Одно из решений состоит в силу тех строк для отображения в виде блоков:

tr.aRelativelyPositionedClass { 
    display: block; 
} 

Answer 6

Согласно http://www.w3.org/TR/CSS2/visuren.html#choose-position обсуждения относительно: "эффект„положение: относительно“на таблицы строк группы, таблицы -header-group, table-footer-group, Таблица-строка, таблица-столбец-группа, таблица-столбец, элементы таблицы-таблицы и таблицы-заголовка не определено. "

Проблема в том, что Firefox, Google Chrome, Opera и Safari выбрали для позиции: относительно ничего не делать в таблице. IMHO, они должны были реализовать изменение рамки ссылки, так что абсолютно позиционированные подэлементы будут отображаться относительно строки таблицы, но они этого не сделали.

Моя потребность в абсолютном размещении элементов в строке произошла в JavaScript, поэтому у меня было простое решение. Если на дисплее элемента отображается таблица-строка, измените его на блок, ТОГДА установите позицию: относительная. Я понимаю, это не поможет вам, если вы пытаетесь сделать все это так, используя HTML и CSS. Но в моей ситуации установка отображения: блок перед положением: относительная работа.

Answer 7

Решение очень просто: установите DIV position = relative, сразу же внутри TD.

Элементы TR и TD не поддерживают «положение», поэтому они не могут быть правильно установлены в положение «position = relative», чтобы быть контейнером для вашего позиционирования.

Это CSS-спецификация & браузеры используют специальные значения позиции CSS для реализации строки & поведение ячейки таблицы.

<td> 
    <div style='position:relative;'> <!-- relative container for positioning --> 
    <!-- DIVs to be positioned, go in here. --> 
    </div> 

Смотрите также: Using Position Relative/Absolute within a TD?