CODEWITHSUNDEEP
csspositioncss-position
TMB
TMB

Reputation: 4703

Remove space for css position:relative

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

Upvotes: 5

Views: 9082

Answers (4)

brenjt
brenjt

Reputation: 16297

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.

Upvotes: 3

kzh
kzh

Reputation: 20638

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;
}

Upvotes: 5

Stuart Burrows
Stuart Burrows

Reputation: 10814

Just collapse the <div /> that holds the link (e.g. set height to 0). Cross browser might require additional styles but here is an example tested in Chrome

Upvotes: 1

Saad Imran.
Saad Imran.

Reputation: 4530

That unwanted space is from the DIV element you have wrapped around you link. Remove that.

http://jsfiddle.net/saad/grs53/12/

Upvotes: 1

Related Questions