ホームページ > 記事 > ウェブフロントエンド > 非常に奇妙なオーバーフロー: 隠れた問題と修正された問題_html/css_WEB-ITnose
非常に奇妙なオーバーフロー: 隠れた問題と修正された問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:16:271946ブラウズ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> <style type="text/css"> body{padding:10px;margin:0;} #box{width:200px; height:200px; float:left; overflow:hidden;margin:0 auto; background:#9C0;} .box2{ width:200px; height:300px; overflow:hidden; background:#CCC; position:fixed;}</style> </head> <body> <div id="box"> <div class="box2"></div></div> </body> </html> #ボックスの高さは200pxで、overflow:hiddenを追加すると理論的には.box2の余分な部分を隠すことができますが、実際には満足のいくものではありません。 .box2のposition:fixedを削除すると、余分な部分が非表示になります。 .box2のposition:fixedを削除せずに解決策を探しています。
ディスカッションへの返信（解決策）
これは不可能のようです。
fix はブラウザ ウィンドウに対して相対的に配置される絶対位置の要素を生成するため、要素の位置は「left」、「top」、「right」、「bottom」属性によって指定されます。
位置のタイプを静的、相対、または継承に変更しない限り。
Position:fixed;
は標準のファイル ストリームから飛び出します。つまり、fixed はウィンドウ自体に対するものであるため、属性 id="box" の設定は有効になりません。どういう意図ですか?
W3C の公式 Web サイトでは、position:fixed は、この div が他の div の影響を受けるのではなく、ブラウザ ウィンドウに対して相対的に配置されることを意味すると明確に規定しています。これはまったく奇妙ではありませんが、そうではありません。理解できない。
最後に、公式 Web サイトのリファレンスを引用します: http://www.w3school.com.cn/css/pr_class_position.asp
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ドロップダウン ボックスのリンクを作成し、多くの Web ページがこのドロップダウン ボックスを参照できるようにしたいと考えています。これにより、ドロップダウン ボックスが変更された後、そのドロップダウン ボックスへの参照もそれに応じて変更されます。 _html/css_WEB-ITnose次の記事：ドロップダウン ボックスのリンクを作成し、多くの Web ページがこのドロップダウン ボックスを参照できるようにしたいと考えています。これにより、ドロップダウン ボックスが変更された後、そのドロップダウン ボックスへの参照もそれに応じて変更されます。 _html/css_WEB-ITnose