删除 css 位置的空间：相对

Question

我有一个链接和一个并排的 iframe。我希望链接出现在 iframe 上。这发生在 td 元素内部。该模式在几行上迭代。当我使用相对 css 定位时，我可以在 iframe 上显示链接，但链接所在的空间仍然会出现。并且它不必要地增加了列的高度。我想消除这个空间。我该怎么做？

我查看了这个，但似乎这个解决方案仍然会提高 tr/td 高度。我还有一个关于我的问题的示例

Answer 1

折叠行高应该可以做到。确保输入一个测量值，而不仅仅是“0”，这样它才能在 ie6 中工作。我将 .collapse 类添加到包含锚点的 div 中。 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

将 HTML 更改为此

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

将 CSS 更改为：

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

相对位置对象保持其初始位置，但显示在其他位置。绝对定位的元素实际上被移动到新位置。您可以将绝对定位的元素移动到相对定位的顶部。

在上面的示例中，我创建了一个相对定位的 div，其中任何绝对位置元素都可以从相对定位元素的左上角移动。如果相对定位的元素移动到页面上的任何其他位置，绝对定位的元素也会随之移动。

Answer 3

该不需要的空间来自您包裹在链接周围的 DIV 元素。删除它。

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

Answer 4

只需折叠保存链接的

（例如将高度设置为0）。跨浏览器可能需要额外的样式，但这里是在 Chrome 中测试的示例