ホームページ > 記事 > ウェブフロントエンド > 位置に関する質問layout_html/css_WEB-ITnose
位置に関する質問layout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:59:28814ブラウズ
<body><style>*{ margin:0; padding:0;}.header{ width:100%; background:blue; }.menu{ width:100%; background:gray; height:40px;}.center{ width:940px; margin:0 auto; height:100px; background:red; position:relative;}.left{ position:absolute; top:0; left:-420px; width:420px; height:160px; background:yellow;}.right{ position:absolute; top:0; right:-420px; width:420px; height:160px; background:yellow;}</style><div class="header"> <div class="center"> <div class="left"></div> <div class="right"></div> </div></div><div class="menu"></div></body> エフェクト画像
左と右は 2 つの背景画像で、中央の両側に配置する必要があります。問題は、右が幅を占めるため、下部にスクロール バーが表示されることです。ヘッダーに overflow: hidden; スクロールバーを追加すると消えますが、下のメニューによって左右がブロックされます。左右を塞がずにメニューの上に置く方法はありますか？
一般的に、左右の画像はメニューによってブロックされるべきではなく、非常に広い画面に遭遇した場合、左右の全体の外観が表示されます。
ディスカッションへの返信(解決策)
ヘッダーの背景を作るには左右を1つにまとめるしかないようです。 。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。