伪类后/前显示位置为静态但不是绝对位置答案

【问题标题】：Pseudo class after/before displays with position static but not position absolute伪类后/前显示位置为静态但不是绝对位置
【发布时间】：2013-11-21 07:23:04
【问题描述】：

我正在使用引导程序 2。我的下拉菜单包含各种填充下拉菜单的元素。我将溢出设置为隐藏，以便保留边界半径。当位置设置为绝对时，伪前/后箭头消失。当位置是静态时它们仍然可见，但我必须使用绝对位置。

HTML：

<div class="dropdown">
    <ul class="dropdown-menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS：

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: static;
    display: block;
    overflow: hidden;
    float: left;
    min-width: 0;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
}

li {
    padding: 4px 10px;    
}

.dropdown-menu:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
  left: 16px;
}

.dropdown-menu:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  position: absolute;
  top: -5px;
  left: 17px;
}

这是一个小提琴：http://jsfiddle.net/rdellara/4epZV/

改变位置：静态；绝对在 .dropdown 查看示例。

【问题讨论】：

你的小提琴没有包含你所有的 CSS，特别是缺少伪选择器。
已修复。不知道这是怎么回事，也许我没有更新。

标签： css

【解决方案1】：

这是因为你在.dropdown-menu上设置了overflow:hidden，因此，如果你将伪元素绝对定位在元素之外，它们就不会出现。

jsFiddle example - overflow:hidden 已移除 - 现在可以使用了。

至于为什么overflow:hidden的职位是static时不起作用，这本身就是另一个问题，除了：

CSS 定位布局模块 3 级 - 6.7。静态的

盒子是普通盒子，按照正常流程布局。 “top”、“right”、“bottom”和“left”属性不适用。

我猜是因为元素没有定位，所以不会溢出。

【讨论】：

如问题所述，我必须使用 position:absolute 和 overflow:hidden，所以你回答的第二部分实际上就是我要问的问题。固定定位和静态的效果是一样的，所以看起来和元素有没有定位没有关系。还有其他想法吗？

【解决方案2】：

因为您在实际元素之外通过负边距顶部有 :before 和 :after 伪元素，overflow: hidden 隐藏了它们。

删除它并更改为 position: absolute 就可以了。

http://jsfiddle.net/4epZV/2/

【讨论】：