删除css位置的空间：相对

Question

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

我查看了this，但似乎该解决方案仍会提高 tr/td 高度。我的问题也有sample

Answer 1

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

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

Answer 2

只需折叠保存链接的<div />（例如，将高度设置为 0）。跨浏览器可能需要额外的样式，但这里是在 Chrome 中测试的 an example

Answer 3

把你的 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 4

折叠线高应该可以做到。一定要进行测量，而不仅仅是“0”，这样它就可以在 ie6 中工作。我将.collapse 类添加到包含锚点的divs 中。 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;
}