シナリオ 最近の要件は、モバイル デバイス用の 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' の計算値のペアになります。 追伸: 上記の段落は W3C ドキュメントからの引用ですが、長い間検索しても元のテキストが見つかりませんでした。見つかったら、リンクを残してください。[Manual dog head] どうやって 結局、左上隅の赤い四角形を完全に表示したいのですが、解決策は何でしょうか?ここでは、次のスタイルを使用してコンテナに追加します パディング上部: 20px; 上マージン: -20px; 原理は実はとてもシンプルです。padding-top: 20px; を追加すると、絶対配置された赤い四角形に表示スペースが確保され、コンテナのボリュームを超えなくなります。次に、位置の変更は margin-top: -20px; によってオフセットされます。図に示すように ps: 最初の赤い四角の左側の覆われた部分も同じ考え方、つまり padding-left と margin-left を使用して解決されます。 要約する 上記は、エディターが導入した CSS で overflow-y: visible; が機能しない理由の分析と解決方法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: ChromeはCookieの変更を監視し、値を割り当てます
序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...
この記事は主に、初心者に XHTML の基本的な知識と、XHTML と HTML の違いを理解しても...
前回の記事では、Dockerの基礎知識であるローカルディレクトリのマウント方法を紹介しました。今日は...
シングルページアプリケーションを開発する場合、特定のルートを入力し、パラメータに基づいてサーバーから...
1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...
注: Web 開発では、フォームに autocomplete="off" を追加...
序文フロントエンドで非常に便利な、小さなアイコン付きの検索ボックスを作成する方法をご紹介します。エフ...
目次1. スローログの紹介2. スローログの練習1. スローログの紹介スロー ログの正式名称はスロー...
この記事では、ウェブページのスネークゲームを実装するためのJavaScriptの具体的なコードを参考...
目次1. ミューテックス1. ミューテックスの初期化2. ミューテックスロックの関連特性と分類3. ...
UPD 2020.2.26 現在、Ubuntu 20.04 LTSはまだリリースされていないため、チ...
MySQL 5.7 以降のバージョンでは、冗長インデックス、重複インデックス、およびインデックスを使...
目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...
MySQL 5.7.9 バージョンの sql_mode=only_full_group_by の問題...
1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...