Remove space for css position:relative

Question

I have a link and an iframe side-by-side. I want the link to appear over the iframe. This occurs inside of a td element. this pattern is iterated over a few rows. When I use relative css positioning, I am able to display the link over the iframe, but the space the link would have been in, still appears. and it add unnecessarily to the column height. I want to eliminate this space. How can I do this?

I looked at this but it seems that this solution would still jack up the tr/td height. I also have a sample of my issue

Answer 1

Collapsing the lineheight should do it. Be sure to put a measurement, and not just "0" so it will work in ie6. I added the .collapse class to the divs containing the anchors. http://jsfiddle.net/grs53/20/

HTML

<table>
    <tbody>
        <tr>
            <td class="donotwant">
                <div class="collapse">
                    <a class="top" href="bing.com">link</a>
                </div>
                <div>
                    <iframe class="bottom" src="http://www.google.com" ></iframe>
                </div>
            </td>
        </tr>
        <tr>
            <td class="donotwant">
                <div class="collapse">
                    <a class="top" href="bing.com">link</a>
                </div>
                <div>
                    <iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.donotwant {
    border:2px dotted green;
}
.top {
    top:80px;
    left:120px;
    position:relative;
    z-index:2;
    background:red;
}
.bottom {
    position:relative;
    z-index:1
}
.collapse {
    line-height:0px;
}

Answer 2

Change your HTML to this

<table>
    <tbody>
        <tr>
            <td class="donotwant">
                <div class="top">
                    <a href="bing.com">link</a>
                </div>
                <iframe src="http://www.google.com" ></iframe>
            </td>
        </tr>
        <tr>
            <td class="donotwant">
                <div class="top">
                    <a href="bing.com">link</a>
                </div>
                <iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
            </td>
        </tr>
    </tbody>
</table>

And you CSS to this:

.donotwant {
    border:2px dotted green;
    position:relative;
    height:180px;
    width:300px;
}
.top {
    top:80px;
    left:120px;
    position:absolute;
    z-index:2;
}
.bottom {
    position:relative;
    z-index:1
}

A relative position object keeps it's initial placement but is displayed elsewhere. An absolute positioned element is actually moved to a new position. You can move absolute positioned elements on top of relative positioned.

In the example above I created a div that is relative positioned in which any absolute position element can be moved around from of the top left corner of the relative positioned element. If the relative positioned element is moved anywhere else on the page the absolute one will follow.