出现的div正在移动侄子div（父母孩子）答案

【问题标题】：Div appearing is moving nephew div (parents child)出现的div正在移动侄子div（父母孩子）
【发布时间】：2014-08-26 16:07:45
【问题描述】：

在我的标题中，我有一个按钮，当您将鼠标悬停在它上面时，它会在下方显示一个选项框。标题下方是主页。但是，当我通过将鼠标悬停在按钮上打开选项时，页面内容会下降到 div 下方。

jsfiddle：http://jsfiddle.net/Minecraft_Percabeth/xr7dcf3f/30/

jsfiddle 全屏：http://jsfiddle.net/Minecraft_Percabeth/xr7dcf3f/30/embedded/result/

这是出现的菜单：

#blogs {
    float: right;
    padding: 0px 10px 0px 10px;
    margin-right: 15px;
    background-color: #60AD32;
    border-radius: 7px;
    color: white;
    width: 100px;
    margin-top: -25px;

有什么我需要添加的吗？让其他 div 忽略它？浮动：对；使主页 div 忽略它，但它的内容不会。

【问题讨论】：

标签： jquery

【解决方案1】：

将您的 UL for blogs 放在“正确”的 div 中。

将博客的 CSS 类更改为具有 position : absolute;并移除 margin-top 设置。

看这个小提琴： http://jsfiddle.net/xr7dcf3f/34/

这是 HTML 更改

    <div class='right blogs-menu'>
        <div class='button blog'>                 
            <h2>Blogs</h2>
        </div>
        <ul id='blogs'>
            <p>< James</p>
            <p>< Jeremiah</p>
            <p>< Peter</p>
            <p>< Thomas</p>
        </ul>
    </div>

css 改变

#blogs {
    float: right;
    padding: 0px 10px 0px 10px;
    margin-right: 15px;
    background-color: #60AD32;
    border-radius: 7px;
    color: white;
    width: 100px;
    margin-top: 0px;
    position: absolute;
}

【讨论】：

这也很有帮助，但你能解释一下吗？我将标题设置为溢出：隐藏；那么为什么当博客列表出现时它没有展开呢？这通常发生在我身上，但不是在你的例子中。是因为位置：绝对吗？我很想知道，因为我经常遇到这个问题。
是的，位置：绝对是它不受标题溢出影响的原因：隐藏设置。看看 alistapart.com/article/css-positioning-101 和 learnlayout.com/position.html 。他们都对位置以及不同位置设置如何协同工作有很好的解释。绝对定位允许您从最近的定位祖先偏移，也可以打破正常的文档流。
感谢您提供的链接，它们很有帮助。我会尽力记住这一切。
你会为有用的材料投一些赞成票吗？

【解决方案2】：

您可以使用position 和z-index css 属性实现您想要的。

#blogs {
    float: right;
    padding: 0px 10px 0px 10px;
    margin-right: 15px;
    background-color: #60AD32;
    border-radius: 7px;
    color: white;
    width: 100px;
    position: relative;
    z-index: 1;
}

#jumbo {
    padding-top: 15px;
    width: 100%;
    height: 800px;
    background-color: #1B7523;
    position: absolute;
}

fiddle

【讨论】：

有趣。在这种情况下，z-index 做了什么？
z-index 在某种意义上是对象所在的层。通过将其设置为 1（其他所有内容默认为 0），它会移动到前面。不幸的是，使用 z-index 需要一个位置属性。