.container {
max-width: 500px;
overflow-x: auto;
white-space: nowrap;
}
.son {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightblue;
position: relative;
margin-right: 20px;
}
.delete_btn {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
background-color: red;
transform: translateX(-50%) translateY(-50%);
}原本以為一切順利，結果得到的結果如圖：
看第矩形左上角的紅色方塊，原本為20 * 20的紅色方塊有一部分被隱藏了。我想應該是overflow影響的，所以想通過overflow-y: visible;來解決,結果是不行的。細心的朋友應該記得overflow的默認值就是visible。那么原因是什么呢？
Why
找了好久，大致了解到是如下原因
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
大致意思是，當overflow-x為scroll或者auto時，overflow-y被設置為auto，反之亦然。這就很尷尬了，那怎么解決這個問題呢。
ps: 上面那段話說是來自于w3c的文檔，但是我找了半天沒找到原文，麻煩找到了的小伙伴留個鏈接~ [手動狗頭]
How
終究還是想讓左上角的紅色方塊顯示完整的，那么解決方案呢，我這里采用的是在container上添加以下樣式
padding-top: 20px;
margin-top: -20px;
原理其實挺簡單的，加了padding-top: 20px;后，絕對定位的紅色方塊就有空間顯示了，不會超出容器體積，然后通過margin-top: -20px;抵消位置的變化.如圖
ps: 第一個紅色方塊左邊被遮住的部分同樣的思路解決，即通過padding-left和margin-left來處理。
以上是“CSS中overflow-y: visible;不起作用的原因是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章標題：CSS中overflow-y:visible;不起作用的原因是什么
網(wǎng)頁鏈接：http://weahome.cn/article/psjssg.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
