Forum Moderators: not2easy
position: relativeposition: absolute<!DOCTYPE html>
<html lang="en">
<head>
<title>Relative positioning + table cell test</title>
<meta charset="utf-8" />
<style type="text/css" media="screen">
div.table-cell,
div.float-cell { position: relative;
display: table-cell;
width: 500px;
background-color: #444;
border: 5px solid #fff;
color: #fff; }
div.float-cell { float: left;
display: block; /* table-cell breaks position: relative; parents */ }
div.abs-pos { position: absolute;
right: 0;
top: 0;
width: 150px;
height: 200px;
background-color: #fff;
border: 5px solid #666;
color: #444;
opacity: 0.7; }
</style>
</head>
<body>
<div id="entirety">
<div id="shell">
<section id="copy" role="main">
<h1>Relative positioning + table cell test</h1>
<p><code>position: relative;</code> alongside <code>display: table-cell;</code> incorrectly loses control over <code>position: absolute;</code> children.</p>
<div class="table-cell">
<p>This is a <code>div</code> set to display as table cell.</p>
<div class="abs-pos">
<p>This is an absolutely positioned <code>div</code> that should be picking up the co-ordinates from its relatively positioned parent, <code>table-cell</code>, but it isn't in Firefox.</p>
</div><!-- end .abs-pos -->
</div><!-- end .table-cell -->
<div class="table-cell">
<p>This is another <code>div</code> set to display as table cell.</p>
</div><!-- end .table-cell -->
<div class="float-cell">
<p>This is a <code>div</code> set to display as a float.</p>
<div class="abs-pos">
<p>This is an absolutely positioned <code>div</code> that is picking up co-ordinates from relatively positioned parent.</p>
</div><!-- end .abs-pos -->
</div><!-- end .float-cell -->
<div class="float-cell">
<p>This is another <code>div</code> set to display as a float.</p>
</div><!-- end .float-cell -->
</section><!-- end section#copy -->
</div><!-- end div#shell -->
</div><!-- end div#entirety -->
</body>
</html>display: table-cell;position: relative;
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
table-*
position: relative
For what it's worth, I've never seen the need for any of the table-* properties. If I want a table, I use a table. Otherwise I use positioning/floats/normal flow as necessary.
There was an article a bit back where someone discussed this very thing and seemed to be convinced that it's just a CSS property, not a table, and you can use it however you want. It just doesn't feel right to me.
table-*
