css - 绝对位置 div 在大小可变的列表项上

标签 css

嘿伙计们,我正在尝试制作一个绝对定位的 div,就像一个覆盖层,它扩展到与 ul 中的列表项相同的宽度,其中列表项是流动的,我的意思是百分比。 我试过了,但是白色的覆盖 div 似乎超过了列表项的大小并扩展到整个浏览器。 你能帮忙吗 这是 fiddle <强> http://jsfiddle.net/JVRnW/

    .overlay
    {
        z-index: 3;


        position:absolute;
        height: 100px;
        width:100%;
        margin-top:0px;
        background-color: #fff;

    }

我想获得与 LI block 大小相同的覆盖 div。 谢谢。 请看我上面的 fiddle 。谢谢。

最佳答案

你只需要让 li 成为相对父级来定位 absolute :

ul li {
  position:relative;
}

演示 http://jsfiddle.net/JVRnW/2/

关于css - 绝对位置 div 在大小可变的列表项上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20639786/

相关文章:

javascript - Galaxy Nexus 忽略视口(viewport)元标记

javascript - 我怎样才能拆开这个 SVG 字体以在 Chrome 中以编程方式使用它?

css - Flexbox 列裁剪图像(仅限 iOS)

css - 如何创建背景图像的静态网格

javascript - 悬停时CSS使图像变暗-在其周围添加一个href

css - 使用::before 和 z-index 偏移标题突出显示 - 仅限 CSS

css - 伪元素仅在同一行的元素之间作为分隔符

css - Bootstrap + CSS : How to set a div's height according to its width?

javascript - 为什么自动高度不适用于图像?

css - 是否可以在不遍历元素的情况下重置整个类