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

【问题标题】：Element does not show outside the bounds of its containing element元素不显示在其包含元素的边界之外
【发布时间】：2015-01-19 06:29:33
【问题描述】：

我有一个包含数据的 div（相对定位），并且想要在盒子顶部放置一系列按钮。这些按钮只是具有绝对定位的 div。但是，如果我将它们放置在包含 div 之外，它们不会显示。如果定位为正（在主 div 内），它们会显示得很好。是否可以在其容器边界之外显示绝对定位的 div（或其他元素，我并不挑剔）？如果有，怎么做？

“按钮”之一的 CSS 的关键部分是：“位置：绝对；右：-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>";

【问题讨论】：

您可能有 oveflow:hidden in main div 只需将其删除！
您可以为容器和按钮发布您的 CSS 吗？
top 的负值不会引起问题，如jsfiddle。我猜你的父 div 上有 overflow: hidden

标签： html css css-position

【解决方案1】：

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

【讨论】：