欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中overflow-y: visible;不起作用的原因分析及解決方法

  發(fā)布時間:2018-09-13 14:42:44   作者:佚名   我要評論
小編最近遇到這樣的需求,移動端的h5頁面,要求有一排可選擇的卡片, 超出容器部分可以左右滑動,同時每張卡片左上角要有一個刪除按鈕。接下來通過本文給大家介紹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%);
}

 

原本以為一切順利,結(jié)果得到的結(jié)果如圖:

看第矩形左上角的紅色方塊,原本為20 * 20的紅色方塊有一部分被隱藏了。我想應(yīng)該是overflow影響的,所以想通過overflow-y: visible;來解決,結(jié)果是不行的。細心的朋友應(yīng)該記得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’.
大致意思是,當(dāng)overflow-x為scroll或者auto時,overflow-y被設(shè)置為auto,反之亦然。這就很尷尬了,那怎么解決這個問題呢。

ps: 上面那段話說是來自于w3c的文檔,但是我找了半天沒找到原文,麻煩找到了的小伙伴留個鏈接~ [手動狗頭]

How

終究還是想讓左上角的紅色方塊顯示完整的,那么解決方案呢,我這里采用的是在container上添加以下樣式

padding-top: 20px;
margin-top: -20px;

原理其實挺簡單的,加了padding-top: 20px;后,絕對定位的紅色方塊就有空間顯示了,不會超出容器體積,然后通過margin-top: -20px;抵消位置的變化.如圖

ps: 第一個紅色方塊左邊被遮住的部分同樣的思路解決,即通過padding-left和margin-left來處理。

總結(jié)

以上所述是小編給大家介紹的CSS中overflow-y: visible;不起作用的原因分析及解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • css 設(shè)置overflow:scroll 滾動條的樣式

    這篇文章主要介紹了css 設(shè)置overflow:scroll 滾動條的樣式 ,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-07-25
  • 深入理解CSS overflow:hidden——溢出,坍塌,清除浮動

    這篇文章主要介紹了深入理解CSS overflow:hidden——溢出,坍塌,清除浮動的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-03
  • css中text-overflow屬性與文本截斷詳解

    這篇文章主要給大家介紹了關(guān)于css中text-overflow屬性與文本截斷的相關(guān)資料,文中給出了詳細的示例代碼供大家參考學(xué)習(xí),希望本文的內(nèi)容對各位前端開發(fā)者們能帶一定的幫助,
    2017-06-04
  • 詳解CSS中zoom屬性或overflow:auto屬性清除浮動的作用

    這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動的作用,文中通過實例代碼介紹的很詳細,相信會對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值,有需要的朋
    2016-11-26
  • 使用CSS的overflow屬性防止float撐開div的方法

    我們在使用float設(shè)定浮動元素的時候經(jīng)常會遇到撐破div的情況,其中一種解決方法即是利用overflow: hidden,這里我們就來看一下使用CSS的overflow屬性防止float撐開div的方法:
    2016-07-07
  • CSS屬性text-overflow的使用問題

    下面小編就為大家?guī)硪黄狢SS屬性text-overflow的使用問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-13
  • 使用CSS隱藏元素滾動條的示例代碼

    這篇文章主要介紹了使用CSS隱藏元素滾動條的示例代碼,需要的朋友可以參考下
    2019-07-10
  • css 給div添加滾動并隱藏滾動條

    這篇文章主要介紹了css 給div添加滾動并隱藏滾動條的實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-07-09

最新評論