CSS中overflow-y:visible;不起作用的原因是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹CSS中overflow-y: visible;不起作用的原因是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比響水網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式響水網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋響水地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

場景

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

心想：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é)果是不行的。細(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 ‘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來處理。

以上是“CSS中overflow-y: visible;不起作用的原因是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：CSS中overflow-y:visible;不起作用的原因是什么-創(chuàng)新互聯(lián)
文章起源：http://muchs.cn/article40/peoho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、微信公眾號、搜索引擎優(yōu)化、移動網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)