|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于CSS中overflow-y: visible;不起作用的解決方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。場景最近要做的一個需求是移動端的h5頁面,要求有一排可選擇的卡片, 超出容器部分可以左右滑動,同時每張卡片左上角要有一個刪除按鈕。如下圖:
心想:so easy, 在父容器上加一個max-width: 200px; white-space: nowrap; overflow-x: auto;不就搞定了嘛。Demo如下: <div class="container">
<div class="son">
<div class="delete_btn"></div>
</div>
<div class="son">
<div class="delete_btn"></div>
</div>
<div class="son">
<div class="delete_btn"></div>
</div>
</div>
.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終究還是想讓左上角的紅色方塊顯示完整的,那么解決方案呢,我這里采用的是在 padding-top: 20px; margin-top: -20px; 原理其實挺簡單的,加了padding-top: 20px;后,絕對定位的紅色方塊就有空間顯示了,不會超出容器體積,然后通過margin-top: -20px;抵消位置的變化.如圖
ps: 第一個紅色方塊左邊被遮住的部分同樣的思路解決,即通過padding-left和margin-left來處理。 相關推薦: iframe雙滾動條 解決方式 CSS3 overflow-y 屬性_html/css_WEB-ITnose HTML標簽的overflow處理用應_HTML/Xhtml_網頁制作 以上就是CSS中overflow-y: visible;不起作用的解決方法的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!