Overflow-y: CSS では表示されない解決策

この記事では、CSS で overflow-y:visible; が機能しない問題の解決策を紹介します。必要な方は参考にしていただければ幸いです。

シナリオ

最近の要件の 1 つは、モバイル側の h5 ページで、コンテナーを超えた部分を同時に左右にスライドできるようにする必要があります。各カード ボタンの左上隅に削除ボタンが必要です。以下に示すように:

私は、とても簡単に、親に max-width: 200px; white-space: overflow- を追加すると考えました。コンテナ x: 自動; 以上です。デモは次のとおりです。

<div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></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-y:visible;を使用して解決しようとしましたが、うまくいきませんでした。注意深い人は、オーバーフローのデフォルト値が表示されることを覚えておいてください。では、その理由は何でしょうか？

なぜ

長々と調べた結果、大体次のような理由が分かりました

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 ドキュメントからのものですが、長い間検索していましたが、元のテキストが見つかりませんでした。見つけたら、リンクを残してください~ [Manual Dog Head]。

方法

結局のところ、左上隅の赤い四角形を完全に表示したいのですが、ここで使用する解決策は次のスタイルを # に追加することです。 ##container

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

この原理は実際には非常に優れています。単純に、padding-top: 20px; を追加すると、絶対に配置された赤い四角形にコンテナの体積を超えずに表示するスペースが確保され、マージンが使用されます。 -top: -20px; 図に示すように、位置の変更をオフセットします。

##ps: の左側のカバーされた部分。最初の赤い四角形は同じ考え方で解決されます。つまり、padding-left と margin-left を通じて処理されます。

関連する推奨事項:

iframe ダブル スクロール バー ソリューション CSS3 overflow-yattribute_html/css_WEB-ITnose

オーバーフロー処理アプリケーションHTML タグの数_HTML/Xhtml_Web ページの制作

以上がOverflow-y: CSS では表示されない解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。