CSS で overflow-y: visible; が機能しない理由の分析と解決

シナリオ

最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要です。コンテナーを超える部分は左右にスライドでき、各カードの左上隅に削除ボタンが必要です。以下のように表示されます。

私はこう思いました: とても簡単だ、親コンテナーに max-width: 200px; white-space: nowrap; overflow-x: auto; を追加するだけで完了する。デモは次のとおりです。

<div class="コンテナ">
  <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>
。容器 {
  最大幅: 500px;
  オーバーフローx: 自動;
  空白: ラップなし;
}
.息子{
  表示: インラインブロック;
  幅: 200ピクセル;
  高さ: 200px;
  背景色: 水色;
  位置: 相対的;
  右マージン: 20px;
}
.delete_btn {
  幅: 20px;
  高さ: 20px;
  位置: 絶対;
  上: 0;
  左: 0;
  背景色: 赤;
  変換: translateX(-50%) translateY(-50%);
}

すべてうまくいったと思いましたが、結果は次のようになりました。

長方形の左上隅にある赤い四角を見てください。元の 20 x 20 の赤い四角の一部が隠れています。オーバーフローが原因かと思い、overflow-y: visible; を使って解決しようとしましたが、うまくいきませんでした。注意深い友人は、オーバーフローのデフォルト値が表示されていることに留意する必要があります。それで、その理由は何でしょうか?

なぜ

長い間調べた結果、大体以下の理由が分かりました

'overflow-x' と 'overflow-y' の計算値は、'visible' との組み合わせが一部不可能なことを除いて、指定された値と同じです。一方が 'visible' に指定され、もう一方が 'scroll' または 'auto' に指定されている場合、'visible' は 'auto' に設定されます。'overflow-y' が同じ場合、'overflow' の計算値は 'overflow-x' の計算値と等しくなります。それ以外の場合は、'overflow-x' と 'overflow-y' の計算値のペアになります。
つまり、overflow-x が scroll または auto の場合、overflow-y は auto に設定され、その逆も同様です。これは非常に恥ずかしいことです。この問題をどう解決したらよいでしょうか?

追伸: 上記の段落は W3C ドキュメントからの引用ですが、長い間検索しても元のテキストが見つかりませんでした。見つかったら、リンクを残してください。[Manual dog head]

どうやって

結局、左上隅の赤い四角形を完全に表示したいのですが、解決策は何でしょうか？ここでは、次のスタイルを使用してコンテナに追加します

パディング上部: 20px;
上マージン: -20px;

原理は実はとてもシンプルです。padding-top: 20px; を追加すると、絶対配置された赤い四角形に表示スペースが確保され、コンテナのボリュームを超えなくなります。次に、位置の変更は margin-top: -20px; によってオフセットされます。図に示すように

ps: 最初の赤い四角の左側の覆われた部分も同じ考え方、つまり padding-left と margin-left を使用して解決されます。

要約する

上記は、エディターが導入した CSS で overflow-y: visible; が機能しない理由の分析と解決方法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。