CSS: box with position: absolute and no top/left has offset_问答_开发者

CSS: box with position: absolute and no top/left has offset

开发者 https://www.devze.com 2022-12-30 15:28 出处：网络

Consider the fo开发者_JS百科llowing: <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"

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

This is rendered as:

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

Why is box 2 not at the same level than box 1? It has a position: absolute, no top or left, and so I would expect it to be taken out of the normal flow with no impact to its position. (Note that I am not trying to fix a "problem" by changing the CSS, but to understand why browsers render this box this way.)

It's because td have a native vertical-align:middle. Because your .box-2 no longer occupies any space, the top is set to the middle of the cell. If you set the valign or vertical-align of td to top, it will work the way you expect.