CSS 位置固定左と右の二重配置実装コード

CSS 位置固定左と右の二重配置実装コード

CSS 位置
position 属性は、要素の配置タイプを指定します。

位置プロパティには 5 つの値があります。

  • 静的
  • 相対的
  • 修理済み
  • 絶対
  • 粘着性

要素は、top、bottom、left、right プロパティを使用して配置できます。ただし、位置プロパティを最初に設定しないと、これらのプロパティは機能しません。配置方法に応じて動作も異なります。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル>
			。箱{
				幅: 1400ピクセル;
				高さ: 1500ピクセル;
				マージン: 0 自動;
			}
			.box1{
				境界線: 1px 実線 #000000;
				高さ: 200px;
				幅: 200ピクセル;
			    表示: インラインブロック;
				位置: 固定;
		
			}
			.box02{
				    境界線: 1px 実線 #006400;
				    高さ: 1500ピクセル;
				    幅: 800ピクセル;
				    表示: インラインブロック;
				    マージン: 0 20px;
				    左マージン: 250px;
			}
			.box03{
				境界線: 1px 実線 #006400;
				高さ: 200px;
				幅: 200ピクセル;
				表示: インラインブロック;
			    位置: 固定;
			}
		</スタイル>
	</head>
	<本文>
		<div class="box">
			<div class="box1">123</div>
			<div class="box02">456</div>
			<div class="box03">789</div>
		</div>
	</本文>
</html> 

ここに画像の説明を挿入

CSS位置固定左と右の二重配置の実装コードに関するこの記事はこれで終わりです。より関連性の高いCSS位置固定配置コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援してください。

<<:  小規模プロジェクトで Vue が点滅するのを防ぐ方法

>>:  フロントエンドHTMLスキン変更機能の実装コード

推薦する

MySQL 8.0.25 解凍版のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.25解凍版のインストールチュートリアル、参考までに具体的な内容は以下のとおりです...

Docker で Jenkins-2.249.3-1.1 をインストールする詳細な手順

目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...

Vue+echarts で積み上げ棒グラフを実現

この記事では、積み上げ棒グラフを実装するためのVue+echartsの具体的なコードを参考までに紹介...

CentOS7 での MySQL 8.0.16 のインストールと設定のチュートリアル

MySQLの古いバージョンをアンインストールします(古いバージョンがない場合は、この手順をスキップし...

クールなネオンライト効果を実現する純粋な CSS (デモ付き)

私は最近、YouTube の CSS アニメーション効果チュートリアル シリーズをフォローしています...

ネイティブJSで禁止すべきメソッドの記述

目次ブロックレベル関数オブジェクトのプロトタイプを直接変更すると呼び出された人発信者評価ブロックレベ...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...

MySQLデーモンの起動に失敗したエラーの解決方法

MySQLデーモンの起動に失敗したエラーの解決方法数日前、公開されたウェブサイトはこれらのアクティビ...

Spring Boot 2.4 の新機能、ワンクリックビルド、Docker イメージプロセスの詳細説明

背景開発プロセス中に Docker コンテナ化をサポートするために、通常は Maven を使用してコ...

きちんとした標準的なHTMLタグの書き方を学ぶ

優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず...

MySQL の自動増分 ID に関するいくつかの小さな問題の要約

以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...

フロントエンドの面接でよく聞かれる JavaScript の質問の完全なリスト

目次1. 手書きのインスタンス2.配列のマップメソッドを実装する3. Reduceは配列のmapメソ...

Linux コマンドを使用してオーディオ形式を変換および結合する方法

FFmpeg flacをインストールする eric@ray:~$ sudo apt install ...

内部 IP アクセスのみを許可する Nginx プロキシ設定を追加する方法

位置 / { インデックス index.jsp; proxy_next_upstream http...

XAML でボタンを円として再描画する方法

XAML レイアウトを使用する場合、インターフェイスを Metro 風にするために、一部のボタンでは...