为DIV内部溢出创建叠加：隐藏DIV无裁剪

diagram showing div layout I'd like 为DIV内部溢出创建叠加：隐藏DIV无裁剪

大家好。我希望能够突出显示溢出的容器DIV中的div：隐藏集（更改这不是一个选项）。我使用CSS'outline'和'box-shadow'属性来执行此操作。问题是，当DIV是外部div的完整大小时，您看不到它被选中，因为大纲（不出所料）会被剪裁到外部div。另外，如果内部div违反问题发生的边缘之一。

附加的图像显示了div的布局，红色是外部div，紫色是'outline'，黑色是我想要突出显示的DIV - 在这个例子中，左边的紫色突出部分被剪切。

所以问题是，有没有一种方法（JavaScript的& jQuery是好的）与另一个div覆盖黑色div，使得（a）覆盖div不会被剪裁到外部div，以及（b）何时黑色div移动或调整大小，覆盖层移动/调整大小？

编辑：它看起来像这样根本就不可能在HTML/CSS中以我描述的方式。

来源

2011-12-13 Ben Clayton

将blackb div设置为“positon：relative”。然后将大纲放入该div中，并将其设置为“position：absolute”。随着顶部，左边，和高度，你可以把它放在黑色格子的“周围”。

编辑：

斯里，黑色的div也必须是绝对的位置。工作示例在这里看到： http://jsfiddle.net/t94FV/

来源

2011-12-13 13:50:51 Flo

Thanks Flo。不幸的是，'紫色div'仍然使用这个技术被剪切到外部div - 除非我错过了一些东西。 –

编辑我的答案 – Flo

Cheers Flo。令人遗憾的是，这种方法可以防止黑色div被剪辑 - 发生的情况是黑色div相对于身体被定位，而不是红色div。尝试在你的jsfiddle中设置黑色div的左侧或顶部（例如，向左：0;顶部：0;）.. :-(感谢您尝试！ –

也许你可以使用百分比的利润率。

来源

2011-12-13 13:46:48 Spikey21

诀窍是只在父母的div与相对位置。没有position:relativeoverflow:hidden div的子女。只有父母！

<div class="trick-container" style="position:relative"> 
    <div class="overflow-hidden" style="overflow:hidden"> 
     <div class="no-relative-position-1"> 
      <div class="no-relative-position-2"> 
       <div class="no-relative-position-N"> 
        <div class="position-absolute" style="position:absolute"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2016-07-26 14:24:09 oleg

为DIV内部溢出创建叠加：隐藏DIV无裁剪

回答

相关问题