css - 如何让子元素不受父元素overflow的影响

Question

如图，白色背景框为父元素，自动设置了overflow:hidden （某滚动条插件影响）。
其中有一个上传控件，左边的黑块是此控件的伪元素，这个伪元素是根据这个控件来定位的。但是它会被父元素自动地截断了。请问是否能使其不受overflow影响？

做出类似下面的

简单做了个类似的，大家帮忙看看
https://jsfiddle.net/zmL145ks/

Answer 1

不能的，overflow 產生了一個bfc，其層疊順序的權重較高，position的absolute的權重不如它高。

absolute絕對定位元素，如果含有overflow不為visible的父級元素，同時，該父級元素以及到該絕對定位元素之間任何嵌套元素都沒有position為非static屬性的聲明，則overflow對該absolute元素不起作用。

給你兩篇資料參考
http://www.zhangxinxu.com/wor...
http://www.zhangxinxu.com/wor...

---

更新

transform + overflow + fixed定位進行了實作。
https://jsfiddle.net/vpgL5535/4/

---

把overflow 幹掉後的position 定位
https://jsfiddle.net/vpgL5535/3/

Answer 2

。 。 。你把overflow:hidden去了。要不然就別讓他在這個父元素裡面。 。用absolute絕對定位

Answer 3

可以透過設定 position屬性處理，

http://www.zhangxinxu.com/stu...

Answer 4

如果你不能手動覆蓋父元素的overflow:hidden的屬性的話，你可以試試讓那個偽類相對於白色背景框的父元素絕對定位吧