Question

我想绝对定位DIV，在顶部：0。this diagram中的黄色div（#menu）是有问题的。

我有HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="container_head">
            &nbsp;
        </div>
        <div id="container_body">
            <div id="main">
                <div id="menu">
                    &nbsp;
                </div>
                <div id="content">
                    &nbsp;
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div id="container_foot">
            &nbsp;
        </div>
    </body>
</html>

和CSS：

#container_head {
    width: 100%;
    background-color: #00F;
    z-index: 10;
}
#container_body {
    width: 100%;
}
#container_foot {
    width: 100%;
    background-color: #F00;
}
#main {
    width: 960px;
    margin: 0 auto;
    position: relative;
}
#menu {
    background-color: rgba(255,255,0,0.5);
    width: 170px;
    padding: 10px;
    float: left;
    position: absolute;
    top: 0;
    z-index: 100;
}
#content {
    background-color: #0F0  ;
    width: 750px;
    padding: 10px;
    float: right;
}
.clear {clear: both;}

但是，黄色div不会出现在y位置0. Here is the fiddle。

更新

我很感激答案。我仍然陷入困境。 #container_head对每个用户来说都不会是同一个高度。它是一个响应滑块。另外，我需要#menu位于与#main形状相同的区域的左侧，因此它位于#content旁边。

Answer 1

#menu位于#main内。而#main是position: relative;，意思是＆＃34;定位＆＃34;。绝对定位元素相对于其最接近的定位父元素定位。因此，top: 0;上的#menu从#main的顶部开始为零，而不是文档的顶部。

您可以通过以下几种方式解决此问题：

将#menu移出#main
不要定位#main亲戚（这会影响#main内的任何绝对定位元素，所以要小心）
给#container_head一个固定的高度，然后给#menu一个顶部，例如-30px
制作#menu position: fixed;（这将使其相对于视口而不是文档，因此它将不再滚动文档。这可能会也可能不会同样，position: fixed在兼容模式下无法在IE 6或IE 7中工作。）

Answer 2

我拿走了你的小提琴并以两种方式修改它。首先，我把#menu放在#container_head里面，第二，我删除了顶部：0;来自#menu css。见http://jsfiddle.net/J9E47/

<body>

    <div id="container_head">
        <div id="menu">
                &nbsp;
            </div>
        &nbsp;
    </div>
    <div id="container_body">
        <div id="main">

            <div id="content">
                &nbsp;
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div id="container_foot">
        &nbsp;
    </div>
</body>

和

#container_head {
width: 100%;
background-color: #00F;
z-index: 10;
}
#container_body {
width: 100%;
}
#container_foot {
width: 100%;
background-color: #F00;
}
#main {
width: 960px;
margin: 0 auto;
position: relative;
}
#menu {
background-color: rgba(255,255,0,0.5);
width: 170px;
padding: 10px;
float: left;
position: absolute;
z-index: 100;
}
#content {
background-color: #0F0  ;
width: 750px;
padding: 10px;
float: right;
}
.clear {clear: both;}

Answer 3

这是一个非常快速的小提琴[http://jsfiddle.net/tL55Y/][1]。你需要重新定位你的结构，看看如果这可以帮助你。感谢。

Answer 4

正如gwcoffey所解释的那样，绝对定位元素根据其直接父元素定位。你现在不会得到你正在寻找的结构行为。

以下是替代结构的示例：

Demo

让我解释一下变化：

添加一个容器，其中包含您的三个部分container_head，container_body和container_foot。确保获得position: relative;
```
<div class="container"></div>
```
请注意，您不需要在它们周围创建容器，但如果不这样做，则必须进行一些非常小的更改以考虑默认的body边距。您仍然需要以下方面的结构，只是没有外部div。
通过将#container_head简化为{{1}，使您的菜单位于此相对定位元素的正下方并且与#container_body处于同一级别}和#menu
```
#content
```

现在，通过这种结构，您可以更灵活一些，并编写更简单的标记。由于定位会将菜单从页面流中取出，因此您需要通过应用至少菜单左侧边距+左侧边距+宽度的边距来偏移内容的位置。

Answer 5

在我的示例中，我已将所有ID更改为类，因为作为一般规则，覆盖类比ID更容易。你的结构是相同的，除了我添加的包装。请参阅我的笔：http://codepen.io/mofeenster/pen/jLJhw

这只是改变你使用位置相对位置的问题。要使菜单通过Absolute定位到顶部，您需要使用我添加的包装div。你可以操纵元素在整个地方移动，这取决于哪些div是相对的和绝对的。

另一个例子是我为了类似目的而创建的另一支笔在此处查看：http://codepen.io/mofeenster/pen/nErks

我认为这可以回答你所问的一切。

Answer 6

在阅读了这个帖子，你的评论和更新后的问题之后，你似乎并没有倾向于改变你的标记和布局。考虑到这一点，我们只修复适合您现有标记的样式。

在继续之前，请看一下这个演示：

演示：http://jsfiddle.net/abhitalks/2fYGj/6/

我们需要了解一些问题，我们会逐一解决这些问题。

（1。） 您在容器上的百分比宽度和子项上的像素宽度。在你的问题中，你说容器特别是。标题需要响应。我建议在整个布局中使用相同的单位，即使用所有布局组件的百分比宽度。

（2。） 您有一些填充和边距应用于某些元素，如果您没有正确的box-sizing，这会导致宽度出现问题模型开始。

让我们解决这两个问题：

我们为您的CSS添加最小重置：

* {
    margin: 0; padding: 0; box-sizing: border-box;
}

我们现在将百分比宽度应用于所有元素：

#main {
    width: 100%;
    ...
}
#menu {
    width: 10%; /* within 100% of parent i.e. main */
    ...
}
#content {
    width: 70%; /* within 100% of parent i.e. main */
    ...
}

现在谈谈其他问题：

（3。） 您的container_head，container_body和container_foot的宽度为百分比。 100％宽度是什么？它是父母。因此，为了安全起见，我们还必须将宽度应用于html,body。

我们通过将其添加到您的CSS来解决这个问题：

html, body {
    width: 100%;
}

（4。） 您的#menu绝对定位。现在，绝对位置意味着将元素从流中取出并使其相对于其最近的相对定位的父元素定位。如果不存在这样的父母，那么它就变得与身体相关。在您的情况下，其直接父级#main相对定位，因此菜单尝试相对于#main定位自己。但是，那个不你想要什么。您希望它相对于#container_head。但是#container_head不在其父层次结构中。（而且你不想改变你的标记）否则添加一个包装器就可以解决这个问题。

因此，我们通过移除position: relative上的#main来解决此问题：

#main {
    ...
    /* position: relative;  <-- Remove positioning from main */
}

这会强制#menu相对于页面定位。这将引入另一个问题，即如果您将margin-top应用于#container_head，则菜单将会启动。为了缓解这种情况，您必须在top上应用#menu，该margin-top等于#container_head的{{1}}。（此演示可以最好地理解这一点： http://jsfiddle.net/abhitalks/LbRKb/ ）

（5。） 您需要#menu与#content对齐。并#menu绝对定位。绝对位置意味着它不在流动状态，因此菜单和内容上的float现在毫无意义。

我们通过为菜单和内容分配百分比余额来修复它：

#menu {
    width: 10%; 
    top: 0; left: 10%; /* whatever indent you want from left */
    /* float: left <-- not required now */
    ...
}
#content {
    width: 70%;
    margin-right: 10% /* right margin equal to left pos of menu */
    margin-left: 20%; /* left margin equal to left pos of menu + menu width */
    /* float: right <-- not required now */
    ...
}

（6。） 因为您的菜单现在绝对定位，如果{{1}中的内容很少或没有内容，其高度可能超过#main 1}}。在那种情况下，它将主要重叠到页脚甚至更远。

我们通过为#content和#menu分配最小高度并确保主要高度超过菜单高度来解决此问题：

#main

你去吧。现在，您的布局与您发布的图表图片完全相似。

更新（基于Op的评论）：

为了使用#main { min-height: 200px; /* must be more than that of menu */ ... } #menu { min-height: 100px; ... }约束菜单和内容大小，上述方法将打破下面评论中Op提到的菜单和内容之间的差距。

要解决这个问题，结果很简单。诀窍是在max-width上使用right代替left。

演示3：http://jsfiddle.net/abhitalks/2fYGj/17/ 演示3（全屏）：http://jsfiddle.net/abhitalks/2fYGj/17/embedded/result/

希望有所帮助。

Answer 7

首先，当您将元素的定位设置为绝对时，它不会被视为一般布局的一部分，并且它将被忽略在定位其他div时。因此，如果你想对齐#content和#menu，你需要在#content中手动设置等于＃menu的宽度+填充的余量：

#content {
    background-color: #0F0  ;
    width: 750px;
    padding: 10px;
    margin-left: 190px; /* Allow space for #menu considering its padding */
    /* Floating is not necessary for this. */
}

其次， 位置：绝对会将div相对于其最近的父级置于 position：relative set。所以在你的情况下，＃menu将相对于#main定位。您必须做的是从#main中删除 position：relative ，以便#menu相对于其下一个最接近的父级 body 定位。

#main {
    width: 960px;
    margin: 0 auto;
}

最后，使用绝对定位时，浮动是没有意义的，所以你可以从#menu中删除它。

#menu {
    background-color: rgba(255,255,0,0.5);
    width: 170px;
    padding: 10px;
    position: absolute;
    top: 0;
    z-index: 100;
}

这里是完整的CSS：

#container_head {
    width: 100%;
    background-color: #00F;
    z-index: 10;
}
#container_body {
    width: 100%;
}
#container_foot {
    width: 100%;
    background-color: #F00;
}
#main {
    width: 960px;
    margin: 0 auto;
}
#menu {
    background-color: rgba(255,255,0,0.5);
    width: 170px;
    padding: 10px;
    position: absolute;
    top: 0;
    z-index: 100;
}
#content {
    background-color: #0F0;
    width: 730px;
    padding: 10px;
    margin-left: 190px;
}
.clear {clear: both;}

Here's the JsFiddle

Answer 8

我已更新您的代码，这可能是您的问题的答案：

http://jsfiddle.net/2fYGj/7/

我已将div.container_head和div.container_body包裹在另一个div内：

<body>
<div>
  <div id="container_head"><!-- Contents --></div>
  <div id="container_body"><!-- Contents --></div>
</div>

<div id="container_foot">
</div>
</body>

对于CSS部分，我删除了（注释）#main的位置：

#main {
  width: 960px;
  margin: 0 auto;
  /*position: relative;*/
}

新添加的div的一些风格：

body > div {
    position: relative;
}

Answer 9

对于元素#main，请移除position:relative;

Answer 10

position: absolute元素始终相对于设置为position: absolute或position: relative的最近包含元素定位。这就是为什么你的#menu div固定在#main div的顶部以及之前的海报建议的原因，只需从position: relative删除#main将#menu打开到顶部。另外，将它固定在#container_head添加

的顶部

body {
  position: relative;
}

这不会影响宽度计算，因此menu位于content左侧。

CSS：父div上方的绝对位置div

10 个答案:

更新（基于Op的评论）：