html - 元素不显示在其包含元素的边界之外

Question

我有一个包含数据的 div(相对定位)，并希望在框的顶部放置一系列按钮。这些按钮只是具有绝对定位的 div。但是，如果我将它们放在包含的 div 之外，它们就不会显示。如果定位为正(在主 div 内)，它们显示良好。是否可以在其容器的边界之外显示绝对定位的 div(或其他元素，我不挑剔)？如果是，怎么办？

其中一个“按钮”的 CSS 关键部分是:“position:absolute；右:-3px；宽度:20px；顶部:-27px；”

主矩形具有以下 CSS 类型(可见性/显示在适当的时候由 javascript 打开):

.ob{
    visibility:hidden; 
    display:none;
    position:relative;
    left:1;
    top:1;
    text-align: left;
    vertical-align: top;
    padding-top: 12px;
    margin-bottom: 20px;
    padding-left:2px; padding-right:2px;
    border-collapse: collapse;
    overflow: auto;
}

使用以下 PHP 定义了一个示例:

echo "  <div id='$portalid.ButtonDelete' 
style='border:2px solid ".$onefield["Color.Border"]."; text-align: center; color: ".$onefield["Color.Text"]."; background: ".$onefield["Color.Fill"]."; 
position: absolute; right: ".$ButtonRight."px; width: 20px; top: -2px; 
font-family: Sans-Serif; font-weight: bold; 
height: 20px; padding-top: 2px; 
z-index:1; cursor:pointer;' title='Delete selected ".$onefield["Display"]."' onclick='alert(\"Not implemented\");'>
X
</div>";

转化为:

<div id='Delete'
style='border:2px solid red; text-align: center; color: White; background: Pink;
position: absolute;  right: -2px; width: 20px; top: -24px;
font-family: Sans-Serif; font-weight: bold;
height: 20px; padding-top: 2px; z-index:1; cursor:pointer;'
title='Delete selected records' onclick='alert(\"Not implemented\");'>
X
</div>";

Answer 1

我通过在主矩形的“.ob”CSS 中将“overflow:auto”更改为“overflow:visible”解决了这个问题。我有点困惑，因为四个“按钮”现在很好地位于主矩形(我想要的)的顶部，但是当我为矩形指定固定高度时，内容仍然滚动(我也想要，但不是'似乎不符合“溢出:可见”规范。所以它可以工作，但我不完全明白为什么。