コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

位置に関する質問layout_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:59:28
オリジナル
813 人が閲覧しました

<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つにまとめるしかないようです。 。

関連ラベル：
position レイアウト
ソース：php.cn
前の記事：パターンラボ 次の記事：CSS3 実践開発: CSS3 を使用して photoshop_html/css_WEB-ITnose のフィルタリング効果を実現する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
戻り値の変数の形式は何ですか? 私はphpの初心者です。コードを見つけました: if($x<time()){return[false,'error'];} ロジックや変数は重要ではありませんが、[false...
から 2024-04-06 21:55:20
0
1
778
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
POST リクエストは Postman を使用している場合は正常に動作しますが、React axios と Spring Boot バックエンドを使用している場合は正常に動作しません 反応コンソールから、URL「:8080/api/review-add」を指すエラー メッセージ「リソースを読み込めません: サーバーの応答ステータスは 500()」が表示されます ...
から 2024-04-05 13:07:01
0
1
396
nginx proxy_pass 設定を変更した後、React アプリが読み込まれません ReactappNodeJS バックエンドと nginx を持っています。証明書を取得し、Certbot 経由でインストールしました。私のアプリケーションは get リクエストと ...
から 2024-04-05 11:53:10
0
1
316
キャンバスの *2* 高さの値を取得しますか? このキャンバスの 2 つの高さの値を取得しようとしています。 <canvaswidth="886"height="792"style=...
から 2024-04-05 09:32:33
0
1
1360
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート