国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[踩坑] CSS中overflow-y: visible;不起作用

Muninn / 3416人閱讀

摘要：場景最近要做的一個需求是移動端的頁面，要求有一排可選擇的卡片超出容器部分可以左右滑動，同時每張卡片左上角要有一個刪除按鈕。如下圖心想在父容器上加一個不就搞定了嘛。我想應(yīng)該是影響的，所以想通過來解決結(jié)果是不行的。

場景

最近要做的一個需求是移動端的h5頁面，要求有一排可選擇的卡片, 超出容器部分可以左右滑動，同時每張卡片左上角要有一個刪除按鈕。如下圖：

心想：so easy, 在父容器上加一個max-width: 200px; white-space: nowrap; overflow-x: auto;不就搞定了嘛。Demo如下：


  

    

  

  

    

  

  

    

  




.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é)果是不行的。細(xì)心的朋友應(yīng)該記得overflow的默認(rèn)值就是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 ‘a(chǎn)uto’, then ‘visible’ is set to ‘a(chǎn)uto’. 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來處理。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113935.html

相關(guān)文章

  • CSS總結(jié)

    摘要：，視窗高度，等于視窗高度的。并不會對他周圍的元素產(chǎn)生任何影響。修改屬性只會造成本元素的重繪。雖然它和普通的類相似，可以為已有的元素添加樣式，但是它只有處于樹無法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。 display inline/inline-block/block -->> 牛奶/果凍/堅果 inline: img, span, strong, em, i, em, a...

    godlong_X 評論0 收藏0

  • 張鑫旭-overflow的細(xì)節(jié)筆記

    摘要：中的問題中設(shè)置尺寸和不起作用，此時需要為才會起作用下的問題的出現(xiàn)所有的均是來自于，不是。證明就是本省是有的的。及以下默認(rèn)右側(cè)始終有一個的條。如果滾動區(qū)域?qū)懥松舷履敲磿笔L動條導(dǎo)致布局問題滾動條是會占據(jù)寬度的，所以最好是把寬度預(yù)留足夠。 overflow的一些小問題 overflow-x和overf-y同時使用的問題 如果overflow-x和overflow-y二者的值相同，等同于o...

    crossoverJie 評論0 收藏0

  • CSS Sticky 其實很簡單

    摘要：大致步驟如下監(jiān)聽滾動事件，計算目標(biāo)元素距離視口的距離。距離滿足條件時，創(chuàng)建占位元素，修改目標(biāo)元素定位方式為。僅僅為了實現(xiàn)這個效果頁面上沒有其他內(nèi)容大動干戈性價比很低。對癥下藥，讓滾動發(fā)生在被誤匹配上的祖先元素內(nèi)即可恢復(fù)。為什么要寫這篇文章 Sticky 也不是新知識點了，寫這篇文章的原因是由于最近在實現(xiàn)效果的過程中，發(fā)現(xiàn)我對 Sticky 的理解有偏差，代碼執(zhí)行結(jié)果不如預(yù)期。決定寫篇文章重新...

    番茄西紅柿 評論0 收藏0

  • CSS Sticky 其實很簡單

    摘要：大致步驟如下監(jiān)聽滾動事件，計算目標(biāo)元素距離視口的距離。距離滿足條件時，創(chuàng)建占位元素，修改目標(biāo)元素定位方式為。僅僅為了實現(xiàn)這個效果頁面上沒有其他內(nèi)容大動干戈性價比很低。對癥下藥，讓滾動發(fā)生在被誤匹配上的祖先元素內(nèi)即可恢復(fù)。為什么要寫這篇文章 Sticky 也不是新知識點了，寫這篇文章的原因是由于最近在實現(xiàn)效果的過程中，發(fā)現(xiàn)我對 Sticky 的理解有偏差，代碼執(zhí)行結(jié)果不如預(yù)期。決定寫篇文章重新...

    davidac 評論0 收藏0

  • overflow-y:auto/hidden/scroll和overflow-x:visible組合

    摘要：但是會因為實際使用情況和邏輯上的復(fù)雜程度而變得并不好用。至于瀏覽器為什么會這樣就只搬運了不詳細(xì)解釋參考資料解決方案原因 最近做項目想做一個這樣的效果：就是我想要內(nèi)部div x軸溢出div則顯示y軸溢出div則出現(xiàn)滾動條于是用到了overflow-y 和 overflow-x 這個css屬性原來以為css中直接設(shè)置就ok { overflow-y：scroll; overflow-x: ...

    lansheng228 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<