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

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

css-position position css

0

avernet · 技术社区 · 15 年前

考虑以下事项:

<!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 回复 | 直到 15 年前

1

2

tau 15 年前

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