CSS の位置の問題: 絶対位置、相対位置、固定および静的-CSSチュートリアル-php.cn

CSS の位置の問題: 絶対位置、相対位置、固定および静的

不言

リリース： 2018-08-10 11:32:00

オリジナル

2240 人が閲覧しました

この記事では、CSS の位置決め、固定位置、固定位置に関する問題について説明します。必要な方は参考にしていただければ幸いです。

1. 絶対配置 (絶対): 元の位置から離れた位置に配置します。

html コード

<!DOCTYPE html>
<html lang="en">
<head>
	<meter charset="utf-8">
	<title>hhhh</title> 
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<p class="demo"></p>
	<p class="box"></p>
</body>
</html>

ログイン後にコピー

CSS コード:

*{
	margin:0;
	padding:0;
}
.demo{
	position:absolute; 
	/*top:100px;
	left:100px;*/
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 0.5;     /*透明度*/
}
.box{
	width:150px;
	height:150px;
	background-color: green;
}

ログイン後にコピー

配置時の効果はありません。 used (p 要素はブロックレベルの要素で、1 行を占めます)

プラス位置決め、左上が設定されていない場合の効果 (現時点では、デモとボックスは同じレベルにありません)

プラス左上の効果

2. 相対配置 (相対): 配置には元の位置を保持します。配置には左、右上、下を使用できます

html コード:

<!DOCTYPE html>
<html lang="en">
<head>
	<meter charset="utf-8">
	<title>hhhh</title> 
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<p class="demo"></p>
	<p class="box"></p>
</body>
</html>

ログイン後にコピー

css コード

*{
	margin:0;
	padding:0;
}
.demo{
	position:relative; 
	/*top:100px;
	left:100px;*/
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 0.5;     /*透明度*/
}
.box{
	width:150px;
	height:150px;
	background-color: green;
}

ログイン後にコピー

オプション配置を使用しない場合

オプションを使用する左上を追加せずに配置する場合

オプション配置を使用し、左上を追加する場合（元の赤い位置を保持して配置し、元の赤い部分は残します）上)

3. 修正:相対ブラウザウィンドウ内で要素を配置するには、左、右、上、下を使用して配置できます

4.static: デフォルト値、配置なし、上left などは機能しません

注: 位置決めを使用する場合は、親子要素があります

絶対: 最も近い位置にある親を基準とした位置です。そうでない場合は、ドキュメントを基準にして位置します。参照オブジェクトとして相対を使用し、位置決めには絶対を使用します

例:

<div class="wrapper"> <div class="demo"> <div class="box"></div> </div> </div>
ログイン後にコピー
デモを参照してボックスが配置されている場合は、

*{
	margin:0;
	padding:0;
}

.wrapper{
	margin-left: 100px;
	width: 200px;
	height: 200px;
	background-color: orange;
}
.demo{
	position:relative; 
	margin-left: 100px;
	width: 100px;
	height: 100px;
	background-color: red;
	
}
.box{
	position:absolute;
	left: 50px;
	width:50px;
	height:50px;
	background-color: green;
}

ログイン後にコピー