[全桟グルメ店地図を作る]EP 13CSSレイアウト、位置と課題
6.レイアウト位置。htmlコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./6.레이아웃_포지션.css">
<title>Document</title>
</head>
<body>
<div>hello</div>
<div id="target">watch this</div>
<div>hello</div>
</body>
</html>6.レイアウト位置。cssコード
div{
width : 100px;
height : 100px;
display : inline-block;
border: 1px solid black;
}
#target{
background-color: yellow;
left : 10px;
top : 10px;
}
display : inline-block ?
divラベルは元々블록 속성なので、display : inline-blockと指定しない場合は、箱は下に下がるはずです.ここは
display : inline-blockなので横並びです.🥗 id=positionプロパティをtargetに適用
1) position : static;
position : static;=元の場所(デフォルト)[結果]
変わらない!
2) position : relative;
position : relative;=は、本来あるべき位置staticから相対的に移動することを意味する.
static属性の場合は浅緑色のボックスで、relativeプロパティの場合、淡い緑のボックスを基準に左に移動します:10 px、top:10 px.[結果]
3) position : absolute;
position : absolute;가장 가까운 부모 중의 포지션 속성はrelativeを見つけて相対的に移動します.もし、最近の親であれば、
relative인 속성이 없는 경우はbodyに準じて移動する.
htmlを見ると、
target의 부모はbodyタグです.そのため、ターゲットはbodyタグを基準に移動します.
[結果]
bodyタグを基準として、左に移動:10 px、top:10 px.htmlコードの追加
<div class="container">
<div>hello</div>
<div id="target2">watch this</div>
<div>hello</div>
</div>CSSコードの追加
.container{
width : 400px;
height : 400px;
}
#target2 {
background-color: red;
left : 30px;
top : 30px;
} 
4)target 2の位置:absolute;追加
[結果]
absolute:最近の親には相対属性が適用されていないためbodyラベルを基準にleft:30 px,top:30 pxを用いた.Q.class=“container”でターゲット2の位置を決めるためには？
containerにposition : relative;を加えます.[結果]
target2の最も近い親(container)はrelativeの属性を有するため、containerを基準として位置を決定することが見られる.5) position : fixed;
#targetの位置をfixedに変更
固定属性は画面そのものを基準に移動していると考えられる.
left、rightプロパティを削除し、
bottom : 0;と書きます.
いつも黄色い箱が床にあります.
ソース:https://www.youtube.com/watch?v=ZADMjxXrDgQ&list=PL9fj-ZeWhcv118AMsuTfCi0hWhjp_Fi09&index=13
Reference
この問題について([全桟グルメ店地図を作る]EP 13CSSレイアウト、位置と課題), 我々は、より多くの情報をここで見つけました https://velog.io/@dingdoooo/풀스택-맛집지도-만들기-EP13.-CSS-레이아웃-Position과-과제テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol