CSS中overflow-y:visible;不起作用怎么辦

這篇文章給大家分享的是有關(guān)CSS中overflow-y: visible;不起作用怎么辦的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、雄縣網(wǎng)絡(luò)推廣、小程序定制開(kāi)發(fā)、雄縣網(wǎng)絡(luò)營(yíng)銷、雄縣企業(yè)策劃、雄縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供雄縣建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：muchs.cn

場(chǎng)景

最近要做的一個(gè)需求是移動(dòng)端的h6頁(yè)面，要求有一排可選擇的卡片, 超出容器部分可以左右滑動(dòng)，同時(shí)每張卡片左上角要有一個(gè)刪除按鈕。

心想：so easy, 在父容器上加一個(gè)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影響的，所以想通過(guò)overflow-y: visible;來(lái)解決,結(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時(shí)，overflow-y被設(shè)置為auto，反之亦然。這就很尷尬了，那怎么解決這個(gè)問(wèn)題呢。

ps: 上面那段話說(shuō)是來(lái)自于w3c的文檔，但是我找了半天沒(méi)找到原文，麻煩找到了的小伙伴留個(gè)鏈接~ [手動(dòng)狗頭]

How

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

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

原理其實(shí)挺簡(jiǎn)單的，加了padding-top: 20px;后，絕對(duì)定位的紅色方塊就有空間顯示了，不會(huì)超出容器體積，然后通過(guò)margin-top: -20px;抵消位置的變化.如圖

ps: 第一個(gè)紅色方塊左邊被遮住的部分同樣的思路解決，即通過(guò)padding-left和margin-left來(lái)處理。

感謝各位的閱讀！關(guān)于CSS中overflow-y: visible;不起作用怎么辦就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章標(biāo)題：CSS中overflow-y:visible;不起作用怎么辦
網(wǎng)站路徑：http://muchs.cn/article40/pphseo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化、網(wǎng)站改版、網(wǎng)站制作、網(wǎng)站導(dǎo)航

廣告

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