CODEWITHSUNDEEP
css
Nilzor
Nilzor

Reputation: 18593

How do I offset an element using the 'top' CSS property inside a TD?

So I want to offset an element 5 pixels up. I set position: absolute and top: -5px. Now the element is positioned relative to the page, not the containing TD tag. Am I understanding absolute positioning wrong? It does say

position it at a specified position relative to its closest positioned ancestor or to the containing block.

Ancestor is TD, right?

Similarly, the top definition says

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

So why does this JsFiddle render the table content block relative to the page, not the TD?

Upvotes: 1

Views: 311

Answers (2)

CJdriver
CJdriver

Reputation: 458

You're missing a position: relative; in the parent TD element. The TD doesn't include that by default.

JS fiddle. http://jsfiddle.net/2p225mv2/2/

CSS to fix it:

td {
  position: relative;
}

Upvotes: 2

j08691
j08691

Reputation: 207900

Because you're missing the part that says: closest positioned ancestor with the key word being "positioned".

Add:

td {
    position:relative;
}

and you'll get this jsFiddle example

Upvotes: 1

Related Questions