css layout problem why doesn't a div with absolute positioning recognize an encapsulating td cell

I have the arrangement below. My question is, why won't the first div tag align to the top of the cell, instead it moves down to the top of the image (both ie and firefox etc.)? Absolute positioning will not work as it appears that the div will not recognize the td cell as its parent and instead moves to the top of the document. Is there a way around this?

<td style="width:33%;height:100%; border:solid 1px black; position:relative;">

                        <div style="vertical-align:top;">test&开发者_JAVA百科lt;/div>

                        <div style="text-align:center; vertical-align:middle;padding-bottom:120px; padding-top:30px;">
                            <img src="<%=LastThumb%>" style="vertical-align:middle; border:solid 1px black;" alt="" />
                        </div>
                    </td>

You are correct that position:absolute; will cause the element to be COMPLETELY REMOVED from the regular flow of the other elements and make the div (and its children) then relative to the document window itself instead of its parent.

You are also using <div> elements, which are block-level elements. Thus, the browser will always place only one per line separated by line-breaks. You can get around this by adding display:inline-block; to both of the divs' CSS styles. This will then cause both divs to be treated as inline elements, allowing you to place one "on top" of the other.