溢出自动和位置绝对问题答案

【问题标题】：Overflow auto and position absolute issue溢出自动和位置绝对问题
【发布时间】：2014-07-10 06:48:39
【问题描述】：

我有溢出的“容器”：auto。在这个模具里面，我有位置为：相对的“子”div。在子 div 中，我有一个带有 position: absolute 的“banner” div。我想在孩子的右上角显示横幅。但是我看不到横幅。

如果我评论“容器” div 的 overflow:auto 语句，那么我可以看到。但是如果内容增加，我的容器 div 会溢出以获得滚动。请看以下代码。

HTML

<div class="container">
    <div class="child">
        <div class="banner">
            Banner
        </div>        
    </div>
</div>

CSS

.container{
    max-height: 200px;
    overflow: auto;
    border: 2px solid blue;
    margin-top: 50px;
}
.child{
    position: relative;
    width: 200px;
    height: 50px;
    border: #000;
    background-color: green;
}
.banner{
    position: absolute;
    top: -20px;
    left:10px;
    height: 20px;
    width: 150px;
    border: 1px solid red;
    background-color: #ccc;
    color: #000;
    z-index: 400;
}

请参考jsfiddle http://jsfiddle.net/anu1718/XDLm5/

【问题讨论】：

由于相对父级中的绝对定位，横幅的最高点将为 0px。它的高度是 20px，它的顶部位置是 -20px，这意味着它被放置在父显示参数之外。将它的顶部设置为 0px，它应该会显示。
in .banner top 设置为负数，所以它会上升，使其不可见。如果您希望它下降，请设置前 0 或正数。
但我需要它在右上角，比如工具提示。

标签： css

【解决方案1】：

在横幅 css 上而不是左侧使用 right:0px 也使用 top:0px; 你可以参考这个小提琴：http://jsfiddle.net/XDLm5/1/

【讨论】：

I want to show the banner at top right corner of child.But i m unable to see the banner。这就是您在问题中所写的。 你想靠近孩子吗？
JSFiddle 你可以参考这个。如果这有帮助，请将答案标记为正确答案，因此问题已关闭
那么，这就是你想要实现的目标？
是的，但现在问题是我得到了滚动条。为什么不能像我给 zindex 一样放在父元素的顶部。为什么要占用父母的空间
它正在占用父母空间，因为它在父母内部。如果您希望它作为工具提示，您可以将其放在容器外，然后根据您的需要定位它。