Question

考虑此代码：

<div class="menu">
<ul>
    <li class="active">I'm active!</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>

我的.menu div有1px黑色边框，而我的.active列表元素有白色背景。现在，我希望我的.active列表元素位于div的“外部”，并与边框重叠，将其部分隐藏在白色背景中。这怎么可以实现？

说明我想要的东西;

这就是我现在所拥有的，编码的; http://i.stack.imgur.com/cVZHt.png

这就是它的样子; http://i.stack.imgur.com/gp2k2.png

Answer 1

使用相对定位。

.menu li {
    position: relative;
    top: 1px;
}

需要注意的事项要确保其有效：

这是所有 li元素的事实是故意的。如果我只把它放在选定的那个上，那么所选择的那个就会向下移动。
仅当蓝色背景是ul标记的一部分且li标记具有透明背景（当然不是图像）时，此方法才有效。否则，您可能会掩盖ul元素的所有边界。

还有一件事（只是'原因）。你有这个：

<div class="menu">
<ul>
...
</ul>
</div>

ul标签完全能够自己拥有一个类。除非你有充分的理由不这样做，否则就这样做：

<ul class="menu">
    ...
</ul>

Answer 2

一些CSS黑魔法。

下面的工作示例应该跨浏览器工作。请询问您是否想要解释它是如何工作的。

JSFiddle

享受。

Answer 3

你正在寻找z-index吗？

div.menu li.active { z-index: 99; ... }

那么您可以使用负边距将其定位在“外部”，或者更好地嵌套另一个可以相对定位的元素。

CSS使li元素出现在ul之外

3 个答案: