代码之家 › 专栏 › 技术社区 › avernet

css:box with position:absolute且没有上/左偏移量

css-position position css

avernet · 技术社区 · 14 年前

考虑以下事项:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            .box-2 { position: absolute }

            /* Styling */
            .box-1 { background-color: #ccc; width: 3em  }
            .box-2 { background-color: #ddd; width: 3em  }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="box-1">1</div>
                </td>
                <td>
                    <div class="box-2">2</div>
                </td>
            </tr>
        </table>
    </body>
</html>

这表示为:

Box 2 lower than box 1 http://img.skitch.com/20100512-cr58jx4p5k37n4fcm6cn8h6dde.png

为什么框2与框1的级别不同?它有一个 position: absolute 没有 top 或 left 因此,我希望它在不影响其位置的情况下脱离正常流动。(请注意,我并不是想通过更改CSS来解决“问题”,而是要了解浏览器为什么以这种方式呈现此框。)

1 回复 | 直到 14 年前

tau 14 年前

那是因为 td 有本土化 vertical-align:middle . 因为你 .box-2 不再占用任何空间,顶部被设置为单元格的中间。如果你设置 valign 或 vertical-align 属于 TD 到 top ,它将按您期望的方式工作。

推荐文章

Ravi21 · FF和IE中的元素变形

6 年前

Dolorosa · 使div不受其他div大小的影响

6 年前

Hursh Jha · java swing中的绝对定位图像图标

6 年前

Dave · 消除重叠div

6 年前

Cyberstaker · 如何使图像用箭头填充div?[副本]

6 年前

dekzok · 悬停使元素相互重叠

6 年前

J. Doe · CSS:关于绝对位置的几个问题

6 年前

q126y · 为什么将绝对定位元素的兄弟元素设置为position:relative,使其高于前者?

6 年前

Polygami · 保持图像居中,同时保持100%的高度,仅延伸/裁剪侧面

6 年前

arbuthnott · 子元素垂直居中,但允许父元素在子元素溢出时展开

6 年前