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の変更を監視し、値を割り当てます

推薦する

要素 el-table テーブルの二次カプセル化 (テーブルの高さの調整付き)

序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...

XHTML Web ページ チュートリアル

この記事は主に、初心者に XHTML の基本的な知識と、XHTML と HTML の違いを理解しても...

Dockerでボリュームを管理する2つの方法

前回の記事では、Dockerの基礎知識であるローカルディレクトリのマウント方法を紹介しました。今日は...

Vueルーティングコンポーネントでパラメータを渡す8つの方法の詳細な説明

シングルページアプリケーションを開発する場合、特定のルートを入力し、パラメータに基づいてサーバーから...

MySQLのトランザクション特性とレベル原則の分析

1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...

Chromeブラウザの自動パスワード保存プロンプト機能を無効にする方法

注: Web 開発では、フォームに autocomplete="off" を追加...

HTML CSS に基づく検索アイコン付き検索ボックス機能を実装する

序文フロントエンドで非常に便利な、小さなアイコン付きの検索ボックスを作成する方法をご紹介します。エフ...

MySQLスローログに関する知識のまとめ

目次1. スローログの紹介2. スローログの練習1. スローログの紹介スロー ログの正式名称はスロー...

スネークゲームのウェブ版を実装するためのJavaScript

この記事では、ウェブページのスネークゲームを実装するためのJavaScriptの具体的なコードを参考...

Linux C++ マルチスレッド同期の非常に詳細な説明

目次1. ミューテックス1. ミューテックスの初期化2. ミューテックスロックの関連特性と分類3. ...

Ubuntu 20.04 aptの国内ソースを変更する方法

UPD 2020.2.26 現在、Ubuntu 20.04 LTSはまだリリースされていないため、チ...

MySQLクエリの冗長インデックスと未使用のインデックス操作

MySQL 5.7 以降のバージョンでは、冗長インデックス、重複インデックス、およびインデックスを使...

バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発

目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...

MySQL 5.7.9 バージョンの sql_mode=only_full_group_by 問題を解決する

MySQL 5.7.9 バージョンの sql_mode=only_full_group_by の問題...

CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...