QSSにQTするには
- フロート
- 見つけます
- ボックスモデル
見つけます
- 通常の流れ：HTMLの位置であります
- 相対位置：使用中のHTML要素の相対位置に関係なく、移動要素は依然として元の空間を占有するかどうか、他の要素ボックス上書きします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home</title>
<link rel="stylesheet" type="text/css" href="css\layout.css">
</head>
<body>
<div id="app">
</div>
<div id="test">
</div>
<div id="sd">
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
#app{
width: 100px;
height: 50px;
background-color: aqua;
margin-bottom: 20px;
}
#test{
position: relative;
width: 100px;
height: 50px;
background-color:black;
margin-top: 20px;
left: 20px;
top: 30px;
}
#sd{
width: 100px;
height: 50px;
background-color:pink;
}
- フロート
絶対位置：一般的な流れから、位置は絶対位置決め要素が全く祖先が配置されていない場合に対して配置されている最も近い祖先要素、初期包含ブロックに次に彼の相対位置から決定されます。
フレームと関係なく、ドキュメントフローの絶対配置は、それらがページ上の他の要素をカバーすることができるからである。より高い値は、スタック内のZ-index属性、ブロックの位置を設定することにより、ブロックの積層順序インデックスを.Z制御することができますより高い。ただし、z屈折率のポジションは、負であってもよい属性要素.Zインデックスのために使用することができます
*{
margin: 0;
padding: 0;
}
#app{
width: 100px;
height: 50px;
background-color: aqua;
margin-bottom: 20px;
}
#test{
position: relative;
width: 100px;
height: 50px;
background-color:black;
margin-top: 20px;
}
#sd{
position: absolute;
width: 100px;
height: 50px;
background-color:pink;
left:0px;
top: 10px;;
}
