CSS position
サブラベルの値は、左上右下の値と同じです。
1)親ラベルがposition:relative、staticの場合=>親ラベル
2)親ラベルがposition:absoluteの場合、親ラベルは=>absoluteの形でオフセットパラメータにアクセスして適用されます.
1)親ラベルがposition:staticの場合、=>オフセット距離Parentを検索して作成し続けます.
2)親ラベルがposition:relativeの場合、=>子ラベルは親ラベルのオフセットポイントとして見つかっているので適用されます.(Normal Flowとして描画した場合の差)
3)親ラベルがposition:absoluteの場合、=>親ラベルは再びオフセットパラメータを検索して作成します.
1.サブラベルはposition:static
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.parent{
border:1px solid black;
display: inline-block;
width:200px;
height:200px;
}
.child{
width:100px;
height:100px;
background-color: red;
position:static;
left:30px;
top:30px;
}
</style>
<body>
<div class='parent'></div>
<div class='parent'>
<div class='child'></div>
</div>
</body>
</html>
適用left top等の内容X
2.サブラベルはposition:relative
1)親ラベルの相対または静的
親ラベルに左、上、右、下の関連コンテンツが含まれている場合は、次の親ラベルを参照してください.関連コンテンツがない場合は、静的と同じです.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.parent{
border:1px solid black;
display: inline-block;
width:200px;
height:200px;
position:relative; //or position:static
}
.child{
width:100px;
height:100px;
background-color: red;
position:relative;
left:30px;
top:30px;
}
</style>
<body>
<div class='parent'></div>
<div class='parent'>
<div class='child'></div>
</div>
</body>
</html>
2)親ラベルがabsoluteの場合
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.parent{
border:1px solid black;
display: inline-block;
width:200px;
height:200px;
position:absolute;
}
.child{
width:100px;
height:100px;
background-color: red;
position:relative;
left:30px;
top:30px;
}
</style>
<body>
<div class='parent'></div>
<div class='parent'>
<div class='child'></div>
</div>
</body>
</html>
親ラベルはabsoluteで、親ラベルでoffsetParentを検索するとbodyラベルに到達し、その位置に基づいてleft top 30 pxを適用します.
3.サブラベルがposition:absoluteの場合
1)親ラベルがposition:staticの場合
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.parent{
border:1px solid black;
display: inline-block;
width:200px;
height:200px;
position:static;
}
.child{
width:100px;
height:100px;
background-color: red;
position:absolute;
left:30px;
top:30px;
}
</style>
<body>
<div class='parent'></div>
<div class='parent'>
<div class='child'></div>
</div>
</body>
</html>
親ラベルは静的であるため、オフセットパラメータをさらに検索する際にbodyラベルが使用されるため、bodyラベルに従ってleft top 30 pxが適用される.
2)親ラベルがposition:相対的な場合
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.parent{
border:1px solid black;
display: inline-block;
width:200px;
height:200px;
position:relative;
}
.child{
width:100px;
height:100px;
background-color: red;
position:absolute;
left:30px;
top:30px;
}
</style>
<body>
<div class='parent'></div>
<div class='parent'>
<div class='child'></div>
</div>
</body>
</html>
オフセット距離Parentの検索時に親ラベルが相対的であるため、左top 30 pxは親ラベルに基づいて適用される.
3)親ラベルがposition:absoluteの場合
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.parent{
border:1px solid black;
display: inline-block;
width:200px;
height:200px;
position:absolute;
}
.child{
width:100px;
height:100px;
background-color: red;
position:absolute;
left:30px;
top:30px;
}
</style>
<body>
<div class='parent'></div>
<div class='parent'>
<div class='child'></div>
</div>
</body>
</html>
子供の立場では親が絶対なので、相殺点を見つけましたが、親はまた絶対なので、相殺点を見つけてbodyまで、そこでleft top 30 pxを適用します.
私情
総クリーンアップコード
1) static
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.grandparent{
position:static;
width:400px;
height:400px;
background:green;
top:20px;
left:30px;
}
.parent{
display: inline-block;
width:200px;
height:200px;
left:30px;
top:300px;
background-color:blue;
position:absolute; //or position:static
}
.child{
width:100px;
height:100px;
background-color: red;
position:relative;
left:30px;
top:30px;
}
</style>
<body>
<div class='grandparent'>
<div class='parent'>
<div class='child'></div>
</div>
</div>
</body>
</html>
grandparentは静的であるため、このコンテンツの左上隅は適用されず、親の絶対値は静的であるため、親のbodyから適用される.
relative
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.grandparent{
position:relative;
width:400px;
height:400px;
background:green;
top:20px;
left:30px;
}
.parent{
display: inline-block;
width:200px;
height:200px;
left:30px;
top:300px;
background-color:blue;
position:absolute; //or position:static
}
.child{
width:100px;
height:100px;
background-color: red;
position:relative;
left:30px;
top:30px;
}
</style>
<body>
<div class='grandparent'>
<div class='parent'>
<div class='child'></div>
</div>
</div>
</body>
</html>
grandparentは相対的であるため、コンテンツの左上隅が適用され、適用される親の絶対値は親が相対的であるため、親ベースが適用される.
従って、上と互いの間に距離差はないが、bodyタグとは別のものであることを確認することができる.
Reference
この問題について(CSS position), 我々は、より多くの情報をここで見つけました https://velog.io/@khw970421/CSS-positionテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol