1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め

2021-12-31 18:32:04

CSSポジション
position属性は、要素の位置決めの種類を指定します。

position属性の5つの値。

  • 静的
  • 相対
  • 固定
  • 絶対
  • 粘着性

要素はtop, bottom, left, right属性で位置決めすることができます。しかし、これらの属性は、position 属性が先に設定されていないと機能しません。また、位置決めの方法によって、それぞれ異なる方法で動作します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 1400px;
				height: 1500px;
				margin: 0 auto;
			}
			.box1{
				border: 1px solid #000000;
				height: 200px;
				width: 200px;
			    display: inline-block;
				position: fixed;
		
			}
			.box02{
				    border: 1px solid #006400;
				    height: 1500px;
				    width: 800px;
				    display: inline-block;
				    margin: 0 20px;
				    margin-left: 250px;
			}
			.box03{
				border: 1px solid #006400;
				height: 200px;
				width: 200px;
				display: inline-block;
			    position: fixed;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">123</div>
			<div class="box02">456</div>
			<div class="box03">789</div>
		</div>
	</body>
</html>

この記事は、CSS位置固定左右二重位置決めコードが導入され、より関連するCSS位置固定位置決めコンテンツは、スクリプトホームの過去の記事を検索するか、次の関連記事を閲覧し続け、私はあなたが将来的にスクリプトホームをよりサポートすることを願っています!.