[全桟グルメ店地図を作る]EP 13CSSレイアウト、位置と課題

12344 ワード
グルメマップ テキストリンク

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
右側の奮闘でnode、mysqlをインストール
BOJ 2920