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

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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  tdが空の場合に境界線を表示する方法

>>:  ChromeはCookieの変更を監視し、値を割り当てます

推薦する

MySQL 8.0.24 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.24のインストールチュートリアルを参考までに紹介します。具体的な内...

一般的な docker コマンドの概要 (推奨)

1. 要約:一般的に、次のカテゴリに分類できます。 Docker 環境情報 — docker [i...

Docker で Portainer ビジュアル インターフェースを構築するための詳細な手順

前回述べた問題を解決するために、オンラインで検索したところ、非常に優れたビジュアル インターフェース...

TypeScript における列挙型の理解と応用シナリオ

目次1. 何ですか2. 使用数値列挙文字列列挙異種列挙自然3. 応用シナリオ要約する1. 何ですか列...

webpack-dev-server のコア概念とケースの詳細な説明

webpack-dev-server コアコンセプトWebpack の ContentBase と ...

MySQLの論理アーキテクチャに関する深い理解

MySQL は現在、ほとんどの企業や事業体で使用されているデータベースです。MySQL が使用される...

Ubuntu 18.04にmysql5.7をインストールする

Ubuntu 18.04では参考までにmysql 5.7をインストールします。具体的な内容は以下のと...

MySQL の従来のソート、カスタム ソート、中国語のピンイン文字によるソート

MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...

Vue が値を返してフォームを動的に生成し、データを送信する仕組みの詳細な説明

目次解決された主な問題1. バックエンドから返され、バックエンドに送信されるデータは、次の形式になり...

フロントエンドにアニメーション遷移効果を実装する方法

目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...

Vue 仮想リストの実例

目次序文デザイン成し遂げるまとめ序文最近は、いつも延々とスワイプしています。 Weibo をチェック...

Mysqlクエリ条件で文字列の末尾にスペースがあっても一致しない問題の詳細な説明

1. テーブル構造テーブル人id名前1あなた2あなた(スペース) 3あなた(スペース2つ) 2. ク...

ウォーターフォールフローレイアウト(無限読み込み)を実現する js

この記事の例では、ウォーターフォールフローレイアウトを実装するためのjsの具体的なコードを参考までに...

ベスト HTML/CSS デザインおよび開発フレームワーク 15 選を紹介します

プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...