javascript - 在溢出 :hidden DIV without clipping 内为 DIV 创建覆盖

标签 javascript jquery css html overflow

diagram showing div layout I'd like

大家好。我希望能够在设置了 overflow:hidden 的容器 DIV 中突出显示一个 div(更改这不是一个选项)。我正在使用 CSS“outline”和“box-shadow”属性来执行此操作。问题是,当 DIV 是外部 div 的完整大小时,您看不到它被选中,因为轮廓(不出所料)被剪裁到外部 div。此外,如果内部 div 与边缘之一相对,则会出现问题。

所附图片显示了 div 的布局,红色是外部 div,紫色是“轮廓”,黑色是我要突出显示的 DIV - 在该示例中,左侧的紫色突出显示被剪掉了。

所以问题是,有没有一种方法(JavaScript 和 jQuery 都可以)用另一个 div 覆盖黑色 div,这样 (a) 覆盖 div 不会剪裁到外部 div,以及 (b) 当黑色 div 移动或调整大小,叠加层随之移动/调整大小?

编辑:看起来这在我描述的 HTML/CSS 中是不可能的。

最佳答案

将黑色 div 设置为“positon:relative”。然后将大纲放入那个div,并设置为“position:absolute”。使用 top、left、with 和 height,您可以将其放在黑色 div 的“周围”。

编辑:

抱歉,黑色 div 也必须是绝对位置。工作示例参见此处: http://jsfiddle.net/t94FV/

关于javascript - 在溢出 :hidden DIV without clipping 内为 DIV 创建覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8490193/

相关文章:

javascript - RxJs 重复事件链

javascript - 如何使用 webpack 在 Angular 应用程序中动态加载 Assets (pdf)?

javascript - 第二次刷新浏览器后 svg 图像加载到 Canvas 上

javascript - 时间选择器未正确放置附加在文本框上的 jquery

jQuery - 检查子 div 是否可见

javascript - 如何从附加到网页的 JSON 条目中删除文本?

jquery - 如何保留 jQuery 中任何文本框的文本

html - Flex div 的高度为 228px,即使里面没有内容,我也没有在任何地方指定大小

jquery - 使用 fadeIn 使 DIV 平滑显示

css - 带边框的梯形标签