2019-07-18 Css position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Position</title>
    <style>
        body, html {
            height: 100%;
            margin:0;
            padding:0;
        }
        body {
            height: 400%;
            background-color: red;
        }
        #boxOne {
            height: 300px;
            widht: 300px;
            background-color: yellow;
            position: static;
        }
        #boxTwo {
            height: 300px;
            widht: 300px;
            background-color: green;
            position: fixed;
        }
    </style>
</head>
<body>
<div id="boxOne">
    <div class="box-child"></div>
</div>
<div id="boxTwo">
    <div class="box-child"></div>
</div>
</body>
</html>
  • html에 높이를 100%, margin, padding을 0으로 한 이유은 브라우저 default를 상쇄시키기 위함이다.
  • 모든 박스는 position이 deafult로 static이다.
  • position이 fixed이면 스크롤이 내려가도 그 위치에 그대로 있다.
  • position이 abosolute가 설정되면 html상에 element와 관계있는(상대적 부모박스)elemnt를 살펴보고 이에 상응해서 포지션이 결정된다. 부모태그?에 position : relative를 설정하면 부모 엘리먼트 위에서 움직인다.

flex

  • 자동으로 완성되는 그리드가 없었기때문에 margin으로 인위적으로 조절하는게 힘들었다.
  • 부모박스를 만들고 flex를 적용할때 자녀박스에는 적용을 안한다. 오직 부모박스에만 적용한다.
Written on July 18, 2019