CSS：使绝对嵌套的DIV左对齐答案

【问题标题】：CSS: make absolute nested DIV align leftCSS：使绝对嵌套的DIV左对齐
【发布时间】：2012-12-30 11:36:25
【问题描述】：

我有一个包含内容的下拉菜单。我正在尝试使内容在屏幕左侧的 0px 处对齐。无论我尝试什么，它仍然在其父容器内保持对齐。

由于下拉菜单在浏览器中居中，我很难让它在我想要的地方工作。

<div id="sticky">
    <div id="nav">
        <div class="logo">logo</div>
        <span class="n list">browse</span>
        <span class="n list">search</span>
        <div class="n drop">
            <span>My Account</span>
            <div>
                hello, world!
            </div>
        </div>
    </div>

注意：CSS 不是我的强项。

注意 2：* 一直在寻找所需的代码，而不仅仅是指向 jsFiddle 的链接 - 不知道为什么要忽略转储的代码，因为您可以在 fiddle 中看到它。

【问题讨论】：

“* 一直在寻找所需的代码，而不仅仅是指向 jsFiddle 的链接——不知道为什么”......他们没有 jsfiddle，如果有一天它流行起来怎么办？它留下了数千个没有上下文的问题。你真的应该把你所有的代码都放在这里。

标签： css alignment css-position absolute

【解决方案1】：

.content 框相对于其父级 .n.drop div 定位，因为它具有相对定位。如果您从.n.drop 元素中删除相对定位，您会发现.content 元素可以将自己定位在您想要的位置。您可能还需要将margin-top: 16px; 添加到.content 元素以使其清除菜单。

您可以在此处查看更新的演示：http://jsfiddle.net/XkuHy/14/

【讨论】：

从 Chrome（在 Windows 上），我可以看到“orld！”只要！从 Firefox 我只能看到“d！”。
@sadaf2605，我在这里没有看到，我不确定是什么原因导致的。
@sadaf2605，我现在知道是什么原因造成的，窗口的宽度一定小于 800 像素，并且 nav 元素已设置为绝对定位。我更新了 jsfiddle 以删除绝对定位，但仍通过在其样式中添加：margin: auto; 来居中。

【解决方案2】：

当您将其边距设为 0px 时。它将变为 0px，但相对于其父级。因此，您可以尝试对其 css 的负值边距：

margin-left:-205%;

像这样：http://jsfiddle.net/XkuHy/13/ 或

left: -345px;

像这样：http://jsfiddle.net/XkuHy/13/

但它们都存在跨浏览器可比性问题。

我通过将它添加到 css 中解决了这个问题，其中“hello world”的类名是“dropmenu”：

.drop:hover .dropmenu{
    position: fixed;
    top:  100px;
    left: 0;
    width: 100%;
    height:100px;
    padding:0;
    margin:0;
    z-index:998;
    background-color:white; 
}

惊喜！惊喜！我认为它有效！查看： http://jsfiddle.net/XkuHy/10/

【讨论】：