<body>
  <div class="box1">
    <p>relative：相對定位</p><br>
    <p>以「原本顯示的位置」作為基準，注意元素原本所佔的空間仍會保留</p></div>
  <div class="box2">
    <p>absolute：絕對定位</p><br>
    <p>以基準元素左上角為起點，進行絕對位移</p>
  </div>
  <div class="box3">
    <p>fixed：固定定位</p><br>
  <p>將元素固定在瀏覽器視窗的相對位置</p>
  </div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam nesciunt iusto accusantium laboriosam maiores nobis doloribus officiis, voluptate, fuga qui voluptatibus iure maxime, numquam quis deleniti placeat officia corporis vel harum alias repudiandae commodi quia. Sint vero cupiditate, magni beatae itaque temporibus harum repellendus illo quidem. Ad qui, dolorum rerum iste esse est non cumque nam porro possimus quas magni ipsum amet ullam nulla, ipsa alias, officiis veritatis. Quaerat perferendis, debitis cumque maiores esse corrupti perspiciatis ipsa veritatis omnis quas illo, doloremque quae quisquam velit iusto asperiores? Ea eius possimus earum odio quasi labore, iusto facere beatae cumque nihil ratione aliquam. Iusto saepe asperiores dolor dicta beatae, temporibus provident voluptatem possimus delectus eaque, excepturi sint nulla repudiandae. Sed eos sint at a ipsa inventore quaerat qui neque temporibus pariatur enim, quia quas natus! Consequuntur, ad. Quia totam obcaecati tempore autem amet ratione error placeat aliquid repellat explicabo natus, doloremque necessitatibus dolores voluptatum numquam soluta eaque ullam dignissimos consectetur exercitationem cum quos? Similique neque in rem ratione eum perspiciatis a omnis! Mollitia harum beatae maxime praesentium veritatis aliquam asperiores eaque, error, perspiciatis tenetur quas! Et quis earum officia sed dignissimos quia impedit placeat architecto ullam deleniti quisquam culpa corrupti quo perferendis minima quas, nam accusantium illo enim repudiandae maxime unde nobis. Eligendi ullam, voluptatem aspernatur facere delectus quod placeat fugit mollitia ab, asperiores tempora animi. Sit facilis dolorum eum nulla iure, veritatis illo error. Doloribus tenetur, perferendis ullam modi quae, distinctio eum, reiciendis magnam animi repellat impedit? Repellendus corrupti doloremque veniam harum illo hic eveniet voluptates nostrum eligendi accusantium rerum et reprehenderit officiis incidunt debitis itaque quas delectus quae neque maiores, error, similique ex quis nesciunt? Explicabo molestiae quasi at vel ipsa quidem ratione necessitatibus quisquam cupiditate sit eius iure dolore ipsum, magnam sapiente nisi labore consequatur, nesciunt maiores optio non inventore ipsam ullam. Deserunt vero at quos animi quia. Commodi repellat culpa, consectetur tempora quidem quaerat unde. Dolorem expedita excepturi est nihil explicabo, officia, sint voluptatum possimus delectus corporis vitae blanditiis, amet sed ea odio doloribus inventore consequuntur vero ut. Sequi rerum fuga, temporibus tempore distinctio unde aut. Quod delectus numquam mollitia ipsum dicta eius sequi, explicabo neque cupiditate eaque praesentium dolorum aspernatur magni quia ut similique voluptas assumenda illum officia aliquam! Tenetur, eligendi nisi voluptas sequi iusto nesciunt similique praesentium accusamus sed blanditiis molestiae excepturi voluptatum eum quidem inventore consectetur doloremque! Totam numquam autem assumenda necessitatibus quaerat nesciunt voluptate maiores pariatur a iure quam itaque facilis harum laudantium explicabo dolore, soluta officiis fuga labore rem impedit. Porro veritatis voluptates beatae deserunt ipsum aliquid odit aliquam dolor quasi perspiciatis praesentium architecto a quo illo commodi ratione esse inventore sint voluptate, eaque quam vel. Sequi, deleniti esse! Delectus quis velit eum ducimus aperiam, quae neque tenetur dicta quas aspernatur iusto recusandae nam ea magni doloribus officia iure ex laboriosam minima alias ut quos tempora dolore dolor! Aliquid quia dolorem explicabo inventore consectetur fugit? Nihil cumque quia, earum quae officia quidem a rem veritatis, numquam harum sint, doloremque eos nulla cupiditate aliquid.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, fugit explicabo, sint modi consectetur quis eligendi possimus pariatur et repudiandae suscipit ab molestiae fugiat! Earum quibusdam odio deleniti reiciendis recusandae fuga, vitae illum sed consequuntur commodi reprehenderit ratione labore voluptatibus obcaecati? Inventore accusantium, beatae magni nostrum porro adipisci qui quaerat consequatur praesentium ratione quis? Dolorum repellendus facilis iure placeat accusamus. Esse ea, fuga consectetur in neque aut. Officia sapiente enim odit optio eius exercitationem fuga, inventore sed quam alias dolorum fugiat incidunt? A placeat ad sapiente numquam, quidem dolore veniam voluptatum non fugit corrupti obcaecati sint quas eum cum ex provident. Natus laboriosam harum nisi veritatis velit debitis vero, dignissimos facilis deleniti similique accusantium. Aperiam odio, nam delectus quam, similique omnis laudantium expedita esse laboriosam illo quaerat voluptatem tempore, quibusdam maxime earum. Corporis cupiditate minus et, ullam qui cumque voluptatum soluta veniam numquam eum quasi perferendis labore incidunt, ipsam ea similique eaque voluptates odit blanditiis fugiat laboriosam quam neque? Assumenda commodi adipisci earum porro odit? Minima nihil dolorum accusamus odit est assumenda sit voluptatem, quis quibusdam similique exercitationem nobis molestias numquam adipisci perspiciatis amet optio sint soluta quidem excepturi, odio autem veritatis praesentium! Accusamus enim voluptatibus iure fugiat magni veritatis facilis amet at quasi minus error, tempora fuga, provident quia dolor illum iusto! Nesciunt quibusdam eius libero praesentium tempore rerum velit harum dolore nostrum corrupti impedit et sint ab corporis dolorem, quaerat possimus sapiente. Porro nihil, nam illum, blanditiis repellendus placeat laboriosam soluta eaque, pariatur at unde corrupti consectetur modi voluptatum fuga sint ipsa atque laborum dolor adipisci nemo nesciunt excepturi. Impedit, quae repellendus? Eaque natus aperiam, odit ad incidunt saepe, doloremque corporis maiores veniam, repellendus sed atque non. Vel sunt quibusdam a cum minima fugiat, adipisci mollitia tempore asperiores. Exercitationem quis soluta veritatis aliquid ducimus quia, officiis ea dicta?
</body>

body {
  border: 10px solid #000;
  font-family: 微軟正黑體;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
}

.box1 {
  width: 200px; height: 200px;
  background: red;
  position: relative;
  top: 200px;
  left: 200px;
}

.box2 {
  width: 200px; height: 200px;
  background: pink;
  position: absolute;
  top: 50px;
  right: 100px;
}

.box3 {
  width: 200px; height: 200px;
  background: gray;
  position: fixed;
  bottom: 50px;
  right: 0px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.