Question

我有一个溢出的div：y：hidden;并且在按钮右侧有一个伪元素，我想在div之外定位，但它不起作用。这是小提琴 - http://jsfiddle.net/PAdSd/1/。

但是，如果我给div没有溢出它将被排除在div之外。这是小提琴 - http://jsfiddle.net/PAdSd/2/。

任何帮助都会很精彩

Answer 1

从position: relative移除.nav。您可以在this jsfiddle中看到结果。

类似的问题让我头撞墙几天。试验和错误以及纯粹的机会产生了解决方案。不确定跨浏览器兼容性，但它适用于chrome和firefox（只要您使用-moz为css3属性添加前缀）。

Answer 2

它是隐藏的，因为这就是你告诉它要做的事情。

http://jsfiddle.net/PAdSd/3/

如果您不希望隐藏它，但仍希望隐藏溢出，那么您需要将其重新定位。 .nav:after会将内容放在最后，但会在导航代码中。

您可以通过调整顶部css值来将其放置得更高。

.nav:after{
    content: "";
    border-radius: 5px;
    background: #000;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 500px;
    margin-left: 1px;
    top: 10px;
    box-shadow: -5px 5px 0px #8f0222;
    z-index: 20;
}

或者你可能想要使用body：之后，因为它听起来并不像你实际上想要它在导航栏中。

Answer 3

以下是解决此问题的另一种方法（当您无法移除位置时非常有用：因为比较，使用高度：100％;在伪元素上）：

要使内容可见，请在底部添加填充，例如10px; 然后删除其他元素的填充效果使用margin-bottom：-10px;

所以：

.nav{
    background: transparent;
    height: auto;
    overflow-y: hidden;
    position: relative;
    /*new stuff*/
    padding-bottom:10px;
    margin-bottom:-10px;
}

伪元素不在div外面，溢出隐藏

3 个答案: