CSS如何让位置绝对孩子在父亲的外部可见溢出：hidden;

我有overflow: hidden;CSS如何让位置绝对孩子在父亲的外部可见溢出：hidden;

父元素.box我有有::after

我需要定位的.box::after之外，但仍然能够看到它，即使.box是一个子元素.segmentoverflow: hidden;

<div class="box"> 
    <div class="segment"> 
     ::after   // This ::after is displayed outside of the parent but isn't visible because of `overflow: hidden;` 
    </div> 
</div>

.box需要是overflow: hidden;这样父母012显示。

的CSS ::后

.segment::after { 
    content: ''; 
    position: absolute; 
    top: -30px; 
    left: 0px; 
    width: 100%; 
    height: 30px; 
    background-color: ... 
}

这里的jsfiddle：https://jsfiddle.net/o73ft5k2/

有谁知道我怎么能保持如此overflow: hidden;边界半径的作品，但也让::after伪元素的出现外家长吗？

来源

2017-04-13 David Callanan

你不能做到这一点，如果overflow:hidden到位。没有使用overflow:hidden就有更好的方法达到相同的效果，因为它只是不需要达到这种效果。选中此更新的jsfiddle：

https://jsfiddle.net/o73ft5k2/1/

你可以简单地在特定的元素应用border-radius。另外，请注意`后面的元素中的“box-sizing：border-box”，因为必须添加填充以使文本正确对齐。

来源

2017-04-13 18:14:59 Varin

这将工作，但内部的内容将动态创建，它可能不像两个元素并排一个简单，左边框的边界在右边有一个边框。尽管我应该可以使用'：first-child'和'：last-child'，尽管将来可能无法使用。 –

谢谢我会接受这个答案。 –

我实际上正在建立一个类似的风格菜单今天工作，它也是两边圆形，有三个或两个或只有一个元素。在2或3元素，“第一孩子”和“最后孩子”都很好，但如果只有一个元素呢？我认为这是有史以来第一次，当我使用'：only-child'属性时，基本上只在按钮的两侧应用border-radius，只有它是容器中唯一的一个元素。 – Varin

据我所知，你不能。在这种情况下，您需要将border-radius应用于元素而不是父级。

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
body { 
 
    background: white; 
 
    padding: 40px; 
 
} 
 

 
.box { 
 
    display: inline-block; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    /*border-radius: 30px;*/ 
 
    color: white; 
 
} 
 

 
.segment { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 150px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 

 
.segment:first-child, .segment:first-child:after { 
 
    border-radius: 30px 0 0 30px; 
 
} 
 

 
.segment:last-child, .segment:last-child:after { 
 
    border-radius: 0 30px 30px 0; 
 
} 
 

 
.red { 
 
    background: red; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
} 
 

 
.segment:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    transition: top 0.3s; 
 
} 
 

 
.segment:hover::after { 
 
    content: 'hello world!'; 
 
    color: white; 
 
    top: -30px; 
 
}

<div class="box"> 
 
    <div class="segment red"> 
 
     curved border 
 
    </div> 
 
    <div class="segment blue"> 
 
     hover broken 
 
    </div> 
 
</div>

来源

2017-04-13 18:09:33

这是正确的，因为使用'overflow：hidden;'会隐藏任何溢出不管任何其他东西 –

CSS如何让位置绝对孩子在父亲的外部可见溢出：hidden;

回答

相关问题