这是做绝对/相对/静态 CSS DIV 的方法吗？答案

【问题标题】：Is this the way to do absolute/relative/static CSS DIVs?这是做绝对/相对/静态 CSS DIV 的方法吗？
【发布时间】：2009-03-07 23:41:51
【问题描述】：

我想要一个居中的标题 DIV，并在其中包含以下绝对定位的 DIV：

徽标
菜单
行
标题

但是我的 HTML/CSS 有两个问题：

由于某种原因，页面现在变宽了（见底部滚动条）
如果我的标题更长，我当然希望它是右对齐的

我真正想要的是一个居中的 DIV，并且我想在其中定位 DIV绝对在其居中的父级内（但不是绝对的，因为它们不会居中）。这可能吗？

你将如何完成这个布局？

alt text http://tanguay.info/web/external/centeredLayoutProblem.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">
    #headerArea {
        background-color: yellow;
        margin: 0px auto;
        width: 760px;
        height: 150px;
    }

    #logo {
        position: relative;
        top: 20px;
        left: 20px;
        background-color: orange;
        text-align: center;
        font-size: 32pt;
        width: 150px;
        padding: 10px;
        z-index: 10;
    }

    #menu {
        position: relative;
        top: -52px;
        right: -480px;
        background-color: tomato;
        text-align: center;
        font-size: 14pt;
        width: 240px;
        padding: 10px;
    }

    #title {
        position: relative;
        top: -35px;
        right: -620px;
        font-style: italic;
        font-size: 14pt;
    }

    #line {
        position: relative;
        top: -60px;
        border-bottom: 1px solid blue;
        margin: 0 20px;
    }
</style>

</head>

<body>
    <div id="headerArea">
        <div id="logo">LOGO</div>
        <div id="menu">One&nbsp;&nbsp;Two&nbsp;&nbsp;Three&nbsp;&nbsp;Four&nbsp;&nbsp;Five</div>
        <div id="title">This is the Title a Bit Longer</div>
        <div id="line"></div>
    </div>
</body>
</html>

【问题讨论】：

标签： css

【解决方案1】：

使您的#headerArea div 位置：相对。然后，对于所有内部 div，您可以定位：相对于 #headerArea 的绝对位置。

像这样：

<style type="text/css">
    #headerArea {
        position:relative;
        background-color: yellow;
        margin: 0px auto;
        width: 760px;
        height: 150px;
    }

    #logo {
        position: absolute;
        top: 20px;
        left: 20px;
        background-color: orange;
        text-align: center;
        font-size: 32pt;
        width: 150px;
        padding: 10px;
        z-index: 10;
    }

    #menu {
        position: absolute;
        top: 20px;
        left: 480px;
        background-color: tomato;
        text-align: center;
        font-size: 14pt;
        width: 240px;
        padding: 10px;
    }

    #title {
        position: absolute;
        top: 80px;
        left: 20px;
    width: 720px;
    text-align: right;
        font-style: italic;
        font-size: 14pt;
    }

    #line {
        position: absolute;
width: 720px; 
height: 1px;
        top: 70px;
        border-bottom: 1px solid blue;
        margin: 0 20px;
    } 
</style>

您应该使用“left”属性而不是“right”，因为“right”在 ie6 中不起作用。

我输入的 'left' 和 'top' 值可能有点偏差，但您可以调整以获得所需的值。

编辑：

我已经更正了像素值，并为您的行 div 添加了宽度和高度，因为 IE 默认所有 div 都为一个文本行高。

另外，你的标题 div 应该是全宽的，文本向右对齐，这样标题就会向左而不是向右扩展。

【讨论】：

太棒了，在所有四个测试浏览器中看起来都不错，也学到了一些东西，谢谢！

【解决方案2】：

是的。如果你这样做 #headerArea{position:relative;} 你可以在孩子上拥有 position:absolute ，他们的位置将相对于父母。

【讨论】：

【解决方案3】：

在标题上使用 position:relative （正如已经建议的那样），使其成为一个层，然后其中的绝对定位元素将使用该元素作为原点。

您可以在标记中将行放在徽标之前，然后您无需使用 z-index 将徽标放在行的顶部。所有浏览器对 z-index 的处理方式不尽相同...

通过将标题放在右侧，它会根据需要向左侧展开。

在行上使用上边框而不是下边框，这消除了 IE 想要使元素至少高一个字符的问题。

我删除了一些不必要的样式，并为页面添加了一个标题（这是正确的 html 文档中所要求的）。

这将在 Firefox 3、IE 7、IE 8、Opera 9 和 Chrome 1 中一致显示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
    <title>Title</title>

<style type="text/css">

body {
    margin: 0;
    padding: 10px;
}

#headerArea {
    position: relative;
    background: yellow;
    margin: 0 auto;
    width: 760px;
    height: 150px;
}

#headerArea div {
    position: absolute;
}

#logo {
    top: 20px;
    left: 20px;
    background: orange;
    text-align: center;
    font-size: 32pt;
    width: 150px;
    padding: 10px;
}

#menu {
    top: 20px;
    right: 20px;
    background: tomato;
    text-align: center;
    font-size: 14pt;
    width: 240px;
    padding: 10px;
}


#line {
    top: 80px;
    left: 20px;
    width: 720px;
    border-top: 1px solid blue;
}

#title {
    top: 90px;
    right: 20px;
    font-style: italic;
    font-size: 14pt;
}

</style>

</head>

<body>
    <div id="headerArea">
        <div id="line"></div>
        <div id="logo">LOGO</div>
        <div id="menu">One Two Three Four Five</div>
        <div id="title">This is the Title a Bit Longer</div>
    </div>
</body>
</html>

（您可能需要调整位置才能完全按照自己的意愿进行定位，但这应该很容易。）

【讨论】：