Question

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

其中一个'按钮'的CSS的关键部分是：“position：absolute; right：-3px; width：20px; top：-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”来解决了这个问题。我有点困惑，因为四个'按钮'现在很好地位于主矩形的顶部（我想要）但是当我为矩形指定一个固定的高度时，内容仍然滚动（我也想要，但不是'似乎符合“溢出：可见”规范。所以它有效，但我不完全理解为什么。

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

1 个答案: