[踩坑] 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

終究仍是想讓左上角的紅色方塊顯示完整的，那麼解決方案呢，我這裏採用的是在container上添加如下樣式

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

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

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