Portfolio

absolute

relative

fixed

top, left, right, bottom

z-index

1. position이란?2. Position의 종류 2.1 static 2.2 relative 2.3 absolute 2.4 fixed 2.5 sticky 2.5 z-index

1. position이란?

이름에서처럼, position이란 웹 페이지에서 저희가 만들었던 html 태그나 id, class 박스 등의 위치를 지정해주는 속성입니다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있습니다.

2. Position의 종류

2.1 static

기본적으로 모든 태그들은 따로 position 속성값을 주지 않았다면 static 값을 가집니다. 즉 html에 쓴 태그 순으로 위치가 지정되게 됩니다. 그래서 굳이 기입할 필요는 없지만, 부모 객체에서 다른 position 속성값이 주어졌을 때, 그를 무시하기 위해 사용될 때가 있습니다.


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>static</title>
  <style>
  .box1{
    position:static;
    background-color: green;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box2{
    position:static;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box3{
    position:static;
    background-color: blue;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</body>
</html>

2.2 relative

단어 자체의 뜻처럼 '상대적'인 속성을 가지고 있습니다. 그럼 대체 '무엇'에 상대적인지 궁금해하실 텐데요. 바로 static, 즉 원래 자신이 있어야 하는 위치에 상대적입니다. relative는 그 누구보다도 자신이 원래 있던 자리를 기억하는 친구입니다. 그래서 position: relative;라는 값을 주고 left : 50px; 이라고 추가적으로 적어 주면, 본인의 static 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 됩니다.


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>relative</title>
  <style>
  .box1{
    position: static;
    background-color: green;
    color: white;
    width: 100px;
    height: 100px;
  }
  .box2{
    position:relative;
    left: 40px;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
</html>

relative 속성을 주어 box2가 원래 있어야 할 자리에서 왼쪽으로 40px 떨어뜨린 모습입니다.

2.3 absolute

absolute의 특징을 굳이 한 단어로 설명하자면 'my way'라고 할 수 있습니다. position: absolute;라고 한 뒤 top : 20px; right: 30px;이라고 추가적 값을 주면, 오른쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 보실 수 있습니다. 이들은 기준점이 html 위치에 있기에, 왼쪽 제일 상단이 본래 자신의 위치라고 생각하고 움직이게 됩니다.

그러나, 이 absolute도 눈치를 보는 녀석이 있는데, 바로 부모 요소입니다. relative, absolute, fixed 같은 position 속성이 부모에 놓여있다면, absolute는 position 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 됩니다. 마치 relative가 static의 자리를 유념하고 있는 것처럼요.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>relative-absolute</title>
  <style>

  .box1{
    position:relative;
    top:40px;
    background-color: green;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box2{
    position:absolute;
    top: 40px;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }
  .box3{
    position: absolute;
		top: 30px;
    left: 30px;
    background-color: blue;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
  <div class="box3">box3</div>
  <div class="box1">box1
    <div class="box2">
      box2
    </div>

  </div>
</body>
</html>

상단의 코드를 웹페이지에 구현한 사진입니다. 이처럼 relative 속성에 구애받지 않는 box3은 left와 top에 어느 정도 px을 두어 떨어트렸을 때 상단 제일 왼쪽을 기준점으로 움직였다면, relative 속성인 box1 내에 구속받는 box2는 top: 40px; 값을 주었을 때, box1의 위치를 기준으로 움직였음을 확인하실 수 있습니다. 즉 box2와 3에서 확인할 수 있듯 똑같이 position: absolute; 의 속성을 가지고 있어도, 상위 엘리먼트가 relative 속성을 가졌는지 아닌지에 따라 서로 다른 위치 결과가 나타난다는 것입니다.

2.4 fixed

스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않았으면 한다면, 이 fixed 속성을 이용하시면 됩니다! position:fixed를 기입하면, absolute 가 position 속성을 가진 가장 가까운 부모를 기준으로 위치를 정하는 것 처럼, fixed는 현재 사용자가 보고 있는 뷰포트를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치할 것입니다. 요즘 많은 사이트들이 페이지가 스크롤 되어도 중요한 정보(네비게이션 같은)를 화면에 계속 노출 시켜주기 위해 많이 사용하는 속성입니다.

위 검색 결과 화면에서 스크롤을 내려도 상단의 검색 창은 사라지지 않고 뷰포트 상단에 고정되어 있는 모습을 확인 할 수 있습니다. 크롬 개발자 도구에서 header 클래스에 적용된 position:fixed 속성을 직접 확인해 보세요.


<!DOCTYPE html>
<html lang="ko">
<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">
    <title>fixed</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .nav {
            position: fixed;
            padding: 10px;
            background: #4267B2;
            color: white;
            font-weight: 700;
            font-size: 30px;
            line-height: 50px;
            width: 100%;
            height: 60px;
        }

        .container {
            margin-top: 0;
            padding-top: 120px;
            margin-left: 100px;
            margin-right: 100px;
        }

        .dark-mode {
            position: fixed;
            width: 200px;
            height: 40px;
            background: blanchedalmond;
            border: solid 1px black;
            border-radius: 20px;
            line-height: 40px;
            bottom: 50px;
            right: 50px;
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
    <!-- 네이버 다크모드, 맨 위로가기 버튼도 fixed! -->
    <div class="nav">facebook</div>
    <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo maxime quas porro reiciendis, molestias natus accusantium, blanditiis repudiandae obcaecati deleniti adipisci. Velit totam hic reiciendis temporibus, obcaecati necessitatibus. Autem, commodi?
            Minus ea animi excepturi, magni commodi obcaecati ipsum. Deleniti ipsum, maiores dolorum eaque nihil, hic dolorem perferendis ipsam reiciendis fuga laboriosam? Similique delectus consectetur eius doloremque temporibus quos minima eveniet.
            Recusandae in fugit ad provident quaerat illum aspernatur voluptatum repellat, praesentium ex aut! Quaerat molestias voluptatem ratione voluptates rem ex voluptas reiciendis nobis in id placeat aperiam, ut quasi repudiandae.
            Sint magni suscipit dicta voluptatum, soluta in exercitationem tempore minima modi, quos tenetur cumque aperiam ad facilis necessitatibus possimus, repellat dolores voluptates minus. Molestias fugit perspiciatis velit cumque porro sit!
            At, provident corporis cum reiciendis odit distinctio repudiandae tenetur consectetur eaque dolorem voluptate iusto sed beatae molestias, error non aperiam quibusdam ullam! Reiciendis doloremque sunt minima velit ullam voluptatem assumenda?
            Commodi nulla adipisci quasi magnam exercitationem quis nihil? Cumque nam dolorem repudiandae alias debitis sunt deleniti possimus deserunt non? Alias officia atque unde quae aspernatur rerum fuga sunt tenetur consequuntur?
            <br><br>
            Natus, ad. Quaerat eaque in dolorem? Obcaecati ab iusto non reprehenderit? Consequatur obcaecati facere assumenda, sequi distinctio possimus fuga exercitationem nam. Ipsam, vitae. Quos aspernatur quis cumque hic earum ipsa.
            Sed id ea magnam aut consequuntur natus odio corrupti voluptatem hic? Repellat minima accusamus at laudantium provident animi illo officiis? Tenetur et eos, excepturi minima nobis quia assumenda voluptatem aut?
            Porro ad eos maiores, doloribus, laborum debitis dolores mollitia id inventore laudantium explicabo, dolore tenetur sint. Omnis distinctio hic, sint ullam alias, similique sit dolor libero saepe molestias at quod!
            Dolorem necessitatibus ab ipsa, culpa explicabo vero perspiciatis id illum. Doloribus minima unde accusantium saepe in architecto recusandae iusto, cum praesentium labore hic temporibus voluptatibus eius, vel dolores facilis nostrum!
            A, ullam obcaecati! Ut assumenda ratione temporibus quasi autem hic amet eaque eos incidunt neque eveniet, ipsam ad perferendis provident. Nam, iste dolores. Amet corporis iusto quos quasi voluptates! Porro!
            Laboriosam sed earum officiis? Repudiandae, iste veniam omnis provident odio doloribus minus? Porro distinctio nemo provident vero fuga voluptate, corporis quisquam alias tenetur, praesentium numquam vitae fugiat laudantium soluta? Consequuntur!
            Id, labore consectetur culpa excepturi commodi vero sapiente porro quidem nesciunt, fuga quas quos veritatis sed impedit eveniet odit deserunt dolore enim fugit exercitationem error. Aperiam nam enim dignissimos ab?
            <br><br>
            Eius hic alias quis facilis dolore debitis adipisci? Sint tempora officiis distinctio esse eaque quis blanditiis quos necessitatibus, mollitia, minima aut beatae quidem. Quis quidem veniam, qui aut soluta culpa?
            Alias non distinctio dicta nulla provident molestiae molestias dolorem placeat deleniti explicabo quaerat, dolor rem voluptas praesentium laborum? Repellat et nobis, reprehenderit vitae ipsum officia natus accusamus dolorem iure est.
            Facilis suscipit mollitia minima ipsum excepturi, nisi eum cumque aperiam veniam harum corporis, quasi ipsa ad nemo dolores nam architecto! Veniam dolores velit iste, praesentium dolor aut suscipit optio vero!
            Accusantium maiores quia minus distinctio dicta dolorem assumenda, nostrum exercitationem reiciendis sit fugit nulla hic explicabo velit nam vel cupiditate voluptate sint maxime porro soluta obcaecati praesentium quasi? Esse, magni?
            Similique vero possimus explicabo, hic unde perspiciatis corporis, voluptatum odio error ratione assumenda impedit! Nobis nam totam ipsam, soluta explicabo iusto! Animi incidunt sit cumque corrupti voluptatum itaque aspernatur ipsum?
            Voluptates amet similique nulla sint illum nesciunt aspernatur voluptatibus sunt! Esse facere officiis temporibus! Delectus non in excepturi illum sapiente voluptatum explicabo! Fugit corrupti similique aspernatur perferendis. At, eligendi recusandae?
            Quas a cumque esse, at, numquam vitae officiis voluptatem natus distinctio labore eveniet quibusdam ducimus sed odio cupiditate facilis ab provident incidunt? Voluptatem sit enim dolorem a rerum. Ipsam, vitae.
            Totam laboriosam corporis, nisi illo voluptatum nam, aut dolore fuga debitis quia earum inventore similique dolores esse voluptate deleniti recusandae. Iste veniam in explicabo atque error vitae unde voluptatum? Asperiores?
            <br><br>
            Veniam ea qui possimus. Quisquam, dolore dolorem consequuntur nulla, porro, debitis neque qui minus vero aliquid impedit voluptate modi autem est beatae commodi distinctio nostrum at voluptas reprehenderit. Sapiente, quibusdam.
            Blanditiis consequuntur iste sunt, ex quis labore quaerat ratione ullam aspernatur maiores vero nesciunt quae, nemo perferendis repellat facilis magnam dolor rem odio beatae. Expedita praesentium vel sit nisi alias.
            Vitae quod voluptatum porro non temporibus dignissimos magni illo quasi quidem, ab consequatur blanditiis totam asperiores eum, quam officiis. Maiores temporibus fugiat voluptatibus aliquam? Delectus, praesentium reiciendis! Magni, fugiat nisi!
            Molestiae, totam vero excepturi ullam voluptatem corporis obcaecati vitae amet porro labore necessitatibus praesentium asperiores repudiandae, blanditiis, sunt assumenda eligendi! Consequatur delectus ad officia ducimus hic esse ipsum quisquam dolores!
            Excepturi voluptas, non modi vel soluta asperiores nisi fuga dicta molestias ducimus accusantium quos porro, repudiandae neque nesciunt. Exercitationem, quos accusamus? Fugit vel error iusto ab deleniti harum totam quia.
            Omnis culpa molestiae tempore deleniti quos tenetur. Delectus tempore consequatur mollitia, omnis autem iusto? Commodi corporis reprehenderit officia saepe sequi, eveniet eos odio, doloribus quisquam dolores illo rerum dolorem error.
            Odio est iste esse vero quis molestiae alias voluptates libero, excepturi fugit, autem, commodi quasi et. At ab laboriosam, omnis et quod dolorum officia quam adipisci! Eaque iste reprehenderit accusamus.
            Laborum tempora ipsum unde exercitationem a consequuntur quaerat velit explicabo. Ipsa ut deserunt hic consequatur autem voluptatum, numquam id! Velit modi asperiores nihil molestias obcaecati neque in harum quae tempora.
            Molestias accusantium eum itaque laborum eius tempora excepturi est magni quia iusto velit ratione incidunt optio illum quos tenetur deleniti, quae minus ab, sunt earum eos quas quasi. Quasi, tempora.
            Sapiente sit quaerat ducimus enim nulla earum, voluptates aut harum. Minus ad totam a eligendi voluptas non illo eaque quo, maiores nostrum, sapiente necessitatibus enim odio praesentium voluptatem cum accusamus?
            Consequuntur esse, quam et modi accusantium dolore facere hic at aliquam saepe pariatur nulla animi aspernatur non veniam impedit laboriosam ducimus architecto, quos velit neque, nemo fugiat nihil! Magnam, atque!
            Corporis illo laudantium dolore aspernatur natus hic delectus alias magnam maiores omnis. Dolore soluta illo qui, numquam ea quod recusandae quia laudantium necessitatibus nesciunt inventore voluptatibus perspiciatis quasi ipsam quam.
            Aut tempore quidem minima sit maiores reprehenderit adipisci ut perferendis temporibus nihil, facilis, est possimus dolorum. Mollitia tempore vitae debitis nobis, odit nulla nostrum perferendis minus dolores corrupti, sapiente quae.
            Mollitia, veniam unde! Ullam, sequi repellat totam facere veniam, at quia, praesentium magnam voluptas ab quidem? Tempore nisi quos voluptatibus repudiandae harum sunt, minus illum. Nisi corrupti sint illum obcaecati?
            Impedit, neque enim. In quia dolores quisquam pariatur dicta quo reiciendis laboriosam commodi perferendis facilis, totam hic quos eligendi voluptatibus? Eius quisquam odit dolorem nam eum similique in hic repudiandae!
            Rem sint velit distinctio delectus maxime amet corrupti possimus illo eligendi, dolore nulla rerum soluta magni quod quis ipsum. Atque iste nulla itaque beatae quaerat hic molestiae ex! Excepturi, doloribus!
            <br><br>
            Unde suscipit, explicabo, similique praesentium numquam, laudantium ad eos libero ipsam enim labore hic! A eveniet impedit corporis? Sunt consectetur quasi repellendus pariatur consequuntur laboriosam sequi accusamus, asperiores aspernatur veritatis?
            Laboriosam quod, cum praesentium consequatur eius odit placeat ullam harum at qui rem velit aspernatur aliquid. Eaque, ea nulla soluta harum minus animi aut, necessitatibus nostrum, non voluptatibus similique dolor?
            Harum fuga, voluptatum, unde cum veniam soluta eligendi commodi nostrum corrupti libero neque odit dolorum doloremque illo omnis nisi. Consectetur nesciunt quod quo tempore deserunt explicabo nemo neque similique. Dolorum.
            Eum doloribus laborum iusto ducimus nam, optio illum autem animi pariatur repellendus, suscipit vitae ad nisi rerum dolorum quis iste commodi, sed possimus. Iste fugiat debitis numquam maxime molestias. Molestias!
            Delectus voluptate iste vel ipsa expedita dolorem dolore soluta aperiam, rem quaerat beatae modi, totam officia, laudantium earum repellendus! Rem officia perspiciatis totam. Nam, provident hic aspernatur dolorum doloremque autem.
            Ipsam reiciendis expedita doloribus similique necessitatibus beatae inventore, provident modi, nisi quis commodi sequi odio ut nobis obcaecati incidunt? Eligendi ullam maiores aut facere esse nemo aliquam quae nisi. Nobis?
            <br><br>
            Illo, consequatur. Corporis fugit facilis nostrum dignissimos quae nulla dolore cupiditate, dolores eius quibusdam similique odit? Quae cum, eveniet quasi velit obcaecati nisi libero ad! Quibusdam commodi nobis consequatur tempore!
            Aut optio quos dolor error, deserunt vitae quia illo quisquam at autem labore impedit placeat mollitia neque. Excepturi, deleniti tenetur ad ab tempora sit numquam, vero similique minus facilis nemo.
            Adipisci, alias perferendis! Tempore enim vitae eveniet accusantium ipsam error consequatur itaque architecto ab at ea nemo, dicta, ullam atque praesentium voluptatibus eaque, nihil quia. Officiis ad dolor molestias itaque.
            Veritatis alias numquam pariatur quaerat odit, tenetur, accusamus, eaque reprehenderit in expedita harum? Eos ea repellat impedit ipsa in delectus dolore nihil ducimus eveniet reiciendis possimus molestiae, blanditiis, asperiores officia.
            Voluptatibus dolorem placeat laboriosam quod fugit repellendus, dolores veniam magni distinctio consectetur delectus animi vel officia soluta ad voluptas molestias commodi cupiditate atque nemo quasi? Deserunt incidunt recusandae numquam rerum?
            Autem, consequuntur officiis? Vitae, quo quia et similique quos facere saepe dicta aut fugiat fuga dolore rem iure molestiae nihil esse voluptatem eius neque voluptate deserunt laboriosam nesciunt. Laudantium, alias!
            In blanditiis facere unde neque odio aspernatur sequi minus ullam placeat dolorem omnis voluptas recusandae eius soluta, dolore sint perspiciatis laudantium reprehenderit excepturi porro? Minima qui harum esse temporibus nihil?
            Laboriosam, rem! Natus ab nihil aliquid dolorum amet veritatis unde, molestiae veniam reprehenderit eius voluptatibus facilis earum obcaecati ex dolores quis nisi quibusdam quia nostrum asperiores totam adipisci, laudantium ipsa.
            Quae, quos nemo vel suscipit ullam obcaecati, quas earum alias ab deleniti nam sapiente nulla unde sit omnis aliquid nobis provident necessitatibus voluptates placeat soluta magni minus, iste ex. Reiciendis?
            Inventore eveniet nostrum amet dolor iure repellendus qui autem alias, illum deleniti cum. Quia non placeat qui possimus incidunt atque, mollitia repellendus optio distinctio harum, dolorem minima, deserunt saepe iste!
            Consequatur cumque aliquid earum autem ex eaque vel dolore reprehenderit mollitia, sit incidunt fugiat odio, ullam dolorum quaerat maiores dolor? Quibusdam voluptatibus ad mollitia numquam fugit vero autem, laboriosam placeat?
            Ut optio dicta est non. Ea perspiciatis eius itaque quod ullam repellat doloremque sint autem corporis harum! Voluptates dolores nisi numquam odit optio maxime, veniam blanditiis neque, beatae ea totam.
            Voluptates, provident obcaecati! Quo corrupti aperiam adipisci obcaecati eum nesciunt ducimus dicta, alias similique laudantium architecto eos, amet, at neque. Harum, mollitia! Quas recusandae iure praesentium voluptate, voluptates voluptatum repellat.
            Accusantium ratione, harum dolor voluptate ipsum officia iusto, eveniet hic in saepe provident quia ab. Tempore quos praesentium ab quia nemo laboriosam, fugit optio! Ab ducimus iste expedita voluptatem praesentium.
            Quo molestiae voluptate hic? Culpa quod similique recusandae quis laborum maiores, veniam asperiores reprehenderit est, sit vitae alias ipsum minima dolorum facere dicta mollitia adipisci error vero quasi officia blanditiis.
            Facilis iusto commodi, nostrum in temporibus eum omnis! Ullam voluptatem natus exercitationem voluptatibus veritatis praesentium inventore amet expedita corrupti, possimus quia doloremque fugit porro modi ducimus, nostrum voluptas voluptates quos.
            Nemo, nulla! Fuga voluptate necessitatibus molestias accusantium repellendus harum animi obcaecati nemo, expedita explicabo nesciunt quaerat dicta reiciendis illum totam, quos sit placeat quo saepe officiis doloribus eaque? Ad, sapiente.
            Reprehenderit officia saepe explicabo eaque magnam beatae fugiat consectetur delectus? Sunt voluptate officia magni enim aperiam sequi magnam eos autem fugiat omnis consectetur, distinctio itaque quo veniam architecto at et.
            Mollitia cupiditate suscipit facere dignissimos eum doloremque, quisquam molestias sit dolores, adipisci odio quibusdam deserunt neque, natus nostrum! Repellendus cumque consequatur consequuntur atque tenetur repudiandae optio laudantium! Earum, voluptatibus magnam.</p>
    </div>
    <div class="dark-mode">
        다크모드!
    </div>
</body>
</html>

2.5 sticky

아래 예제에서 스크롤을 내려보세요. sticky된 요소는 부모에 붙게 됩니다.


<!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">
    <title>Document</title>
    <style>
        section {
            height: 1000px;
            border: 3px solid black;
        }

        h2 {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            background: greenyellow;
        }
    </style>
</head>

<body>
    <h1>sticky test</h1>
    <section>
        <h2>1.오늘의 점심 메뉴</h2>
        <ul>
            <li>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, voluptates. Inventore eos nesciunt
                exercitationem ducimus debitis quaerat, aliquam dolores voluptatibus maiores rerum aspernatur eius ex
                eaque consequatur aut et enim, assumenda aliquid, laudantium molestias facilis rem tenetur. Quas
                deserunt corrupti, eveniet hic asperiores odio expedita, eaque temporibus sint reprehenderit cupiditate
                saepe doloremque cumque neque iure debitis in distinctio molestias alias! Exercitationem tempora
                accusantium, molestiae possimus ratione soluta aperiam voluptatibus recusandae at cum harum beatae
                officiis ducimus voluptatum doloremque dolore vero tempore similique numquam illo error sapiente
                reiciendis sit? Ipsum sunt enim officia voluptate id vel. Ab repudiandae quam in aspernatur!
            </li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, voluptates. Inventore eos nesciunt
                exercitationem ducimus debitis quaerat, aliquam dolores voluptatibus maiores rerum aspernatur eius ex
                eaque consequatur aut et enim, assumenda aliquid, laudantium molestias facilis rem tenetur. Quas
                deserunt corrupti, eveniet hic asperiores odio expedita, eaque temporibus sint reprehenderit cupiditate
                saepe doloremque cumque neque iure debitis in distinctio molestias alias! Exercitationem tempora
                accusantium, molestiae possimus ratione soluta aperiam voluptatibus recusandae at cum harum beatae
                officiis ducimus voluptatum doloremque dolore vero tempore similique numquam illo error sapiente
                reiciendis sit? Ipsum sunt enim officia voluptate id vel. Ab repudiandae quam in aspernatur!</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, voluptates. Inventore eos nesciunt
                exercitationem ducimus debitis quaerat, aliquam dolores voluptatibus maiores rerum aspernatur eius ex
                eaque consequatur aut et enim, assumenda aliquid, laudantium molestias facilis rem tenetur. Quas
                deserunt corrupti, eveniet hic asperiores odio expedita, eaque temporibus sint reprehenderit cupiditate
                saepe doloremque cumque neque iure debitis in distinctio molestias alias! Exercitationem tempora
                accusantium, molestiae possimus ratione soluta aperiam voluptatibus recusandae at cum harum beatae
                officiis ducimus voluptatum doloremque dolore vero tempore similique numquam illo error sapiente
                reiciendis sit? Ipsum sunt enim officia voluptate id vel. Ab repudiandae quam in aspernatur!</li>
        </ul>
    </section>
    <section>
        <h2>2.내일의 점심 메뉴!</h2>
        <ul>
            <li>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, voluptates. Inventore eos nesciunt
                exercitationem ducimus debitis quaerat, aliquam dolores voluptatibus maiores rerum aspernatur eius ex
                eaque consequatur aut et enim, assumenda aliquid, laudantium molestias facilis rem tenetur. Quas
                deserunt corrupti, eveniet hic asperiores odio expedita, eaque temporibus sint reprehenderit cupiditate
                saepe doloremque cumque neque iure debitis in distinctio molestias alias! Exercitationem tempora
                accusantium, molestiae possimus ratione soluta aperiam voluptatibus recusandae at cum harum beatae
                officiis ducimus voluptatum doloremque dolore vero tempore similique numquam illo error sapiente
                reiciendis sit? Ipsum sunt enim officia voluptate id vel. Ab repudiandae quam in aspernatur!
            </li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, voluptates. Inventore eos nesciunt
                exercitationem ducimus debitis quaerat, aliquam dolores voluptatibus maiores rerum aspernatur eius ex
                eaque consequatur aut et enim, assumenda aliquid, laudantium molestias facilis rem tenetur. Quas
                deserunt corrupti, eveniet hic asperiores odio expedita, eaque temporibus sint reprehenderit cupiditate
                saepe doloremque cumque neque iure debitis in distinctio molestias alias! Exercitationem tempora
                accusantium, molestiae possimus ratione soluta aperiam voluptatibus recusandae at cum harum beatae
                officiis ducimus voluptatum doloremque dolore vero tempore similique numquam illo error sapiente
                reiciendis sit? Ipsum sunt enim officia voluptate id vel. Ab repudiandae quam in aspernatur!</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, voluptates. Inventore eos nesciunt
                exercitationem ducimus debitis quaerat, aliquam dolores voluptatibus maiores rerum aspernatur eius ex
                eaque consequatur aut et enim, assumenda aliquid, laudantium molestias facilis rem tenetur. Quas
                deserunt corrupti, eveniet hic asperiores odio expedita, eaque temporibus sint reprehenderit cupiditate
                saepe doloremque cumque neque iure debitis in distinctio molestias alias! Exercitationem tempora
                accusantium, molestiae possimus ratione soluta aperiam voluptatibus recusandae at cum harum beatae
                officiis ducimus voluptatum doloremque dolore vero tempore similique numquam illo error sapiente
                reiciendis sit? Ipsum sunt enim officia voluptate id vel. Ab repudiandae quam in aspernatur!</li>
        </ul>
    </section>
    <section>
        <h2>3.오늘의 져녁 메뉴</h2>
        <ul>
            <li>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, voluptates. Inventore eos nesciunt
                exercitationem ducimus debitis quaerat, aliquam dolores voluptatibus maiores rerum aspernatur eius ex
                eaque consequatur aut et enim, assumenda aliquid, laudantium molestias facilis rem tenetur. Quas
                deserunt corrupti, eveniet hic asperiores odio expedita, eaque temporibus sint reprehenderit cupiditate
                saepe doloremque cumque neque iure debitis in distinctio molestias alias! Exercitationem tempora
                accusantium, molestiae possimus ratione soluta aperiam voluptatibus recusandae at cum harum beatae
                officiis ducimus voluptatum doloremque dolore vero tempore similique numquam illo error sapiente
                reiciendis sit? Ipsum sunt enim officia voluptate id vel. Ab repudiandae quam in aspernatur!
            </li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, voluptates. Inventore eos nesciunt
                exercitationem ducimus debitis quaerat, aliquam dolores voluptatibus maiores rerum aspernatur eius ex
                eaque consequatur aut et enim, assumenda aliquid, laudantium molestias facilis rem tenetur. Quas
                deserunt corrupti, eveniet hic asperiores odio expedita, eaque temporibus sint reprehenderit cupiditate
                saepe doloremque cumque neque iure debitis in distinctio molestias alias! Exercitationem tempora
                accusantium, molestiae possimus ratione soluta aperiam voluptatibus recusandae at cum harum beatae
                officiis ducimus voluptatum doloremque dolore vero tempore similique numquam illo error sapiente
                reiciendis sit? Ipsum sunt enim officia voluptate id vel. Ab repudiandae quam in aspernatur!</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, voluptates. Inventore eos nesciunt
                exercitationem ducimus debitis quaerat, aliquam dolores voluptatibus maiores rerum aspernatur eius ex
                eaque consequatur aut et enim, assumenda aliquid, laudantium molestias facilis rem tenetur. Quas
                deserunt corrupti, eveniet hic asperiores odio expedita, eaque temporibus sint reprehenderit cupiditate
                saepe doloremque cumque neque iure debitis in distinctio molestias alias! Exercitationem tempora
                accusantium, molestiae possimus ratione soluta aperiam voluptatibus recusandae at cum harum beatae
                officiis ducimus voluptatum doloremque dolore vero tempore similique numquam illo error sapiente
                reiciendis sit? Ipsum sunt enim officia voluptate id vel. Ab repudiandae quam in aspernatur!</li>
        </ul>
    </section>
</body>

</html>

position - CSS: Cascading Style Sheets | MDN

position 속성은 아래의 목록에서 하나의 키워드 값을 선택해 지정할 수 있습니다. 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다. 의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다.