块元素的绝对定位使其与它的兄弟元素对齐答案

【问题标题】：Absolute positioning a block element alignes it with it's sibling element块元素的绝对定位使其与它的兄弟元素对齐
【发布时间】：2014-05-13 12:18:26
【问题描述】：

尝试在标题内绝对定位 h3（或任何其他块元素）元素时出现意外行为。由于绝对定位是相对于第一个非静态父元素进行的，因此 h3 元素应该相对于容器在窗口顶部对齐。但由于某种原因，它与它的兄弟导航元素对齐。这是标记：

<!DOCTYPE html>
<html>
<head>
<title>Sometitle</title>

<style type="text/css">
* {
    margin:0;
    padding:0;
}

html, body {
    width:100%;
    position:relative;
    background:lightgray;
}

#container {
    width:100%;
    position:relative;
}

#main-header {
    display:block;
}

#main-header #logo {
    position:absolute;
    top:0;
    left:0;
}

#main-header #main-nav {
    display:block;
    background:gray;
    margin:5em 6em;
}

#main-header #main-nav ul {
    list-style:none;
}

#main-header #main-nav .main-nav-link {
    display:inline-block;
}

#main-header #main-nav .main-nav-link a {
    display:inline-block;
    padding:0.8em 1em;
    text-decoration:none;
    color:white;
    font:bold 1em arial;
}

</style>
</head>
<body>
<div id="container">
    <header id="main-header">
        <h3 id="logo">Some logo</h3>

        <nav id="main-nav">
            <ul>
                <li class="main-nav-link"><a href="#">Nav1</a></li>
                <li class="main-nav-link"><a href="#">Nav2</a></li>
                <li class="main-nav-link"><a href="#">Nav3</a></li>     
            </ul>       
        </nav>  
    </header>
</div>
</body>
</html>

【问题讨论】：

建议 - 将其设为 js Fiddle。让我转换一下看看。看？ Not so hard

标签： css html css-position

【解决方案1】：

#main-header #main-nav {
    margin:5em 6em;
}

你的问题：

<header id="main-header">
    <h3 id="logo">Some logo</h3>

    <nav id="main-nav">
        <ul>...

您的H3 是main-header 的一部分，而margins 是疯狂的。

试试这样的方法：

请看这里：http://jsfiddle.net/aLSXn/3/

HTML：

<div id="container">
    <header id="main-header">
        <h3 id="logo">Some logo</h3>
        <nav id="main-nav">
            <ul>
                <li class="main-nav-link"><a href="#">Nav1</a></li>
                <li class="main-nav-link"><a href="#">Nav2</a></li>
                <li class="main-nav-link"><a href="#">Nav3</a></li>     
            </ul>       
        </nav>  
    </header>
</div

CSS：

* {
    margin:0;
    padding:0;
}

html, body {
    width:100%;
    background:lightgray;
}

#container {
    width:100%;
}

#main-header {
    display:block;
}

#logo {
    position:absolute;
    top:0;
    left:0;
}

#main-nav {
    display:block;
    background:gray;
    margin:5em 6em;
}

#main-nav ul {
    list-style:none;
}

#main-nav .main-nav-link {
    display:inline-block;
}

#main-nav .main-nav-link a {
    display:inline-block;
    padding:0.8em 1em;
    text-decoration:none;
    color:white;
    font:bold 1em arial;
}

请看这里：http://jsfiddle.net/aLSXn/3/

【讨论】：

谢谢，这行得通。但它没有回答我原来的问题。当容器相对定位时，为什么 h3 不绝对相对于容器定位自身，而是与其同级导航元素对齐？
因为您使用 position:relative 定义 parent 元素，这使得它考虑了em。 static 是唯一一个 position css property 实际渲染 DOM 而无需对其进行操作。请记住，您设置了 ultimate 父容器 html, body{position:relative;}