ホームページ > 記事 > ウェブフロントエンド > div_html/css_WEB-ITnose の絶対配置によって引き起こされる下位 div 位置の問題
div_html/css_WEB-ITnose の絶対配置によって引き起こされる下位 div 位置の問題
- WBOYオリジナル
- 2016-06-21 09:37:591636ブラウズ
<!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>无标题文档</title></head><body><div style="margin-left:auto; margin-right:auto; width:300px; background-color:#003399;"><div style="width:4000px;"><div style="float:left; width:260px; background:#CC0000; height:4000px; position:absolute;"></div></div><div style="clear:both;"> </div></div><div style="clear:both;margin-left:auto; margin-right:auto; width:800px; height:80px; background-color:#009900;">底部竟然不在底部，而是在中间位置</div></body></html>
一番下の div は一番下ではなく真ん中に表示されます。解決する方法はありますか。レイヤーの 1 つは絶対配置を必要とするため、絶対配置を削除すると、そのレイヤーが一番下に表示されます
ディスカッションへの返信 (解決策)
668a07e57725d0a79ec755c098347aaa下は下ではなく真ん中です
IE6以外全ブラウザ対応
ie6はjs処理を使用
<!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>无标题文档</title></head><body><div style="margin-left:auto; margin-right:auto; width:300px; background-color:#003399;"><div style="width:4000px;"><div style="float:left; width:260px; background:#CC0000; height:4000px; position:absolute;"></div><!--这个有什么意义么，把这个去掉就好--></div><div style="clear:both;"> </div></div><div style="clear:both;margin-left:auto; margin-right:auto; width:800px; height:80px; background-color:#009900;">底部竟然不在底部，而是在中间位置</div></body></html>
HTMLコード
9388a356e2b0f7221de583065afc8888
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
Position:absolute
この問題は、絶対配置を使用するときに発生します。js は、それを処理するために js を使用して、底部より上の div の高さを取得し、次に margin-top を設定します。一番下のブロック
まあ~~絶対に配置された要素はページの位置を占めません。
現在のコードだけから判断すると、なぜ絶対位置決めを使用する必要があるのかわかりません。
そして、絶対位置決めが使用されているのに、なぜ float と Clear float を使用する必要があるのでしょうか? これは、絶対位置決めと同時に使用しても効果がありません。
移動して位置を占有したい場合は、相対位置決めの使用を検討できます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。