div 在 position: relative 后消失答案

【问题标题】：div disappears after position: relativediv 在 position: relative 后消失
【发布时间】：2013-07-29 16:24:56
【问题描述】：

我正在尝试将图像放置在容器内的右侧。但是，在我将父容器设置为position: relative; 后，我的图像消失了。有任何想法吗？网址：http://andrewgu12.kodingen.com/。谢谢！

CSS：

.slide {
    padding-top: 138px;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    position: relative;
        box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3); 
}
div#inner-container {
    text-align: left;
    width: 960px;
    margin: 0 auto;
    padding: 0;
    white-space: normal;
    position: relative;
}
div#name {
    right: 0;
    bottom: 200px;
    position: absolute;
}

HTML：

<div class="slide" id="home" data-slide="1" data-stellar-background-ratio="1">
        <div id="inner-container">
            <div id="name" clas="row">
                <img src="images/names.png">
            </div>                            
        </div>            
    </div>

【问题讨论】：

我认为这与名称 div 的绝对位置有关。
我将位置设置为绝对位置，这样它就会停留在页面底部，悬停在绿色块的正上方。

标签： css html

【解决方案1】：

它不会消失，它只是一路向上并离开监视器 xD 您必须记住，当您使用 position: absolute 时，对象将寻找具有 position: relative 的父对象来定位自己。当您将 position: relative 添加到 div#inner-container 时，它会更改 div#name.row 引用。也许将 height: 100%; 添加到父 div 可能会达到您想要的效果？

【讨论】：

成功了，谢谢！你能解释一下为什么我必须添加 height: 100% 吗？
position:absolute 相对于最近的 position: relative 父级。 div 没有高度，所以它有点没有底部，底部在页面的顶部。使用height: 100% 实际上会使div 的高度与其内容相同。
没有为我做这个把戏。每次滚动到末尾或顶部时，绝对位置都会被删除。

【解决方案2】：

试试这个：

div#name {
    position:fixed;
    right: 0px;
    bottom: 200px;

}

【讨论】：

有什么方法可以将 'div#name' 设置为浮动到 '#inner-container' 而不是 '#container' 的最右边？
Position:fixed 是一个不错的选择