html - z-index 不适用于溢出重叠和滚动条

标签 html css styles overflow z-index

我遇到了以下问题:

我正在尝试显示一些 <div.content>里面有内容。大小限制为 <div.holder>作为 overflow 的 parent 设置,以便您可以向下滚动以查看所有 <div.content> . <div.content><div.holder> 重叠用于造型目的。所有东西都包裹在 <div.container> 中.

但是 <div.content>不会显示在 <div.holder> 上带有 z-index 的元素或任何东西。它呈现在 <div.holder> 中元素,没有滚动条,它呈现在外面,就像我想要的那样。

如何获得滚动条和 <div.content>将重叠其父项 <div.holder>

这是 Fiddle对于这个问题。谢谢。

编辑:

试图完成这个: Photoshoped result example for the fiddle

为此样式目的: Use case

这可能吗?我不一定只使用 HTML 和 CSS,只需要它开始工作即可。

最佳答案

Z-index 仅适用于有位置的元素。所以它没有对 .foo 做任何事情 http://www.w3schools.com/cssref/pr_pos_z-index.asp

关于html - z-index 不适用于溢出重叠和滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13830549/

相关文章:

c# - 以样式定义 InputBindings

c# - 是否可以在 HTML5 Windows 8 Metro 应用程序中开发动态磁贴?

javascript - 输入 Onclick 按钮 功能

javascript - 保存 html 页面 + 更改所有链接以指向正确的位置

css - 字体在 Firefox 上不起作用。在别人身上效果很好

子项的 WPF/XAML 样式集属性?

html - Magento 模板/布局如何更改产品 View

javascript - 如何防止滑动的 div 取代其他元素?

html - 导航栏没有正确的风格

c# - 未聚焦的列表框,项目样式