CSS 使 li 元素出现在 ul 之外答案

【问题标题】：CSS make li element appear outside of the ulCSS 使 li 元素出现在 ul 之外
【发布时间】：2011-06-08 22:39:30
【问题描述】：

考虑这段代码：

<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

【问题讨论】：

活动的 li 是否总是列表中的第一项？
没有。如果你看我添加的截图，它只是一个菜单列表，所以它取决于页面。

标签： css positioning z-index

【解决方案1】：

使用相对定位。

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

为了确保它有效，需要注意以下几点：

这是在所有 li 元素上的事实是有意的。如果我只把它放在选中的那个上，那么选中的那个会出现下移。
只有当蓝色背景是ul 标记的一部分并且li 标记具有透明背景（当然图像除外）时，这才有效。否则，您可能会覆盖 ul 元素的所有边框。

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

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

ul 标签本身就完全可以拥有一个类。除非您有充分的理由不这样做，否则请这样做：

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

【讨论】：

谢谢，我会试试的。关于 UL 周围的 div，因为我的屏幕截图中的蓝色背景实际上是一个条形，它直接穿过屏幕，而列表本身位于一个居中的 960 像素宽的包装器内；）
@Jean Piere，这就是你需要的充分理由：P。
@Stargazer712 啊啊啊啊啊啊啊啊啊啊啊啊啊啊除了在 .menu div 中将 li 推得更远一点之外，这没有任何作用。它不像我想要的那样出现在它的“顶部”。
它会做你想做的事。将顶部参数更改为 100px 即可查看。
如果问题是它没有显示在顶部，那么请执行以下操作：.menu ul { position: relative; z-index:1 } .menu li { position: relative; top: 1px; z-index: 2 }。其他要尝试的事情：确保li 实际上占据了容器的整个大小。应用边框以查看是否属实。这是你需要做的，它会起作用的。

【解决方案2】：

给你一些 CSS 黑魔法。

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

JSFiddle

享受吧。

【讨论】：

【解决方案3】：

是您要查找的 z-index 吗？

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

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

【讨论】：