Leerzeichen für css position:relative entfernen

Question

Ich habe einen Link und einen iframe nebeneinander gestellt. Ich möchte, dass der Link über dem iframe erscheint. Dies geschieht innerhalb eines td-Elements. Dieses Muster wird über ein paar Zeilen wiederholt. Wenn ich relative CSS-Positionierung verwende, kann ich den Link über dem iframe anzeigen, aber der Raum, in dem sich der Link befunden hätte, wird immer noch angezeigt und erhöht die Spaltenhöhe unnötig. Ich möchte diesen Raum eliminieren. Wie kann ich das tun?

Ich habe mir este aber es scheint, dass diese Lösung immer noch die Höhe von tr/td erhöhen würde. Ich habe auch eine Muster meiner Ausgabe

Answer 1

Wenn Sie die Zeilenhöhe einklappen, sollte es klappen. Achten Sie darauf, eine Messung zu setzen, und nicht nur "0", so dass es in ie6 funktionieren wird. Ich fügte die .collapse Klasse zum div s mit den Ankern. 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

Ändern Sie Ihr HTML wie folgt

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

Und Sie CSS zu diesem:

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

Ein Objekt mit relativer Position behält seine ursprüngliche Position bei, wird aber an anderer Stelle angezeigt. Ein absolut positioniertes Element wird tatsächlich an eine neue Position verschoben. Sie können absolut positionierte Elemente über relativ positionierte verschieben.

Im obigen Beispiel habe ich ein relativ positioniertes div erstellt, in dem jedes Element mit absoluter Position von der oberen linken Ecke des relativ positionierten Elements aus verschoben werden kann. Wenn das relativ positionierte Element an eine andere Stelle auf der Seite verschoben wird, folgt das absolute Element.

Answer 3

Der unerwünschte Platz stammt von dem DIV-Element, das Sie um den Link gewickelt haben. Entfernen Sie das.

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

Answer 4

Klappen Sie einfach die <div /> die den Link enthält (z. B. Höhe auf 0 setzen). Browserübergreifend können zusätzliche Stile erforderlich sein, aber hier ist ein Beispiel getestet in Chrome