프로그래밍/HTML, CSS

position

matte 2021. 7. 22. 17:59

*MDN 복붙 🙃

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

 

✔ static

The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

 

✔ relative

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

 

✔ absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left

<h1>Absolute positioning</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall ...</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of ...</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on ... <img src="long.jpg"></p>
* {
  box-sizing: border-box;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

 

✔ fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none, in which case that ancestor behaves as the containing block

뷰포트 (viewport) 에 상대적으로 위치함. 브라우저 화면의 상대위치를 지정할 수 있고, 그래서 화면이 바뀌어도 고정된 위치를 설정할 수 있고, 상위 요소에 영향을 받지 않음

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam, accumsan id ultrices, et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>
* {
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

✍ 그냥 일반 컨테이너 스크롤 만들고 싶을 때, height 랑 overflow: scroll 속성을 이용함

.scrollable {
  height: 300px;
  overflow: scroll;
}

 

✔ sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on values of top, right, bottom, and left. The offset does not affect the position of any other elements

같은 태그를 가진 여러 요소가 교차돼서 sticky 하게 나옴

<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>
* {
  box-sizing: border-box;
}

dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}

 

✔ Other CSS position 속성

속성 설명
position -
top, right, bottom, left -
z-index 겹치는 요소들이 쌓이는 스택 (stack) 의 순서를 설정함
clip ~~~
cursor 표시되는 마우스 커서의 모양을 설정함
overflow 내용 (content) 의 크기가 해당 요소의 박스 (box) 를 넘어갈 때 어떻게 처리할지를 설정함
overflow-x 내용 (content) 의 크기가 해당 요소의 수평방향으로 박스 (box) 를 넘어갈 때 어떻게 처리할지를 설정함
overflow-y 내용 (content) 의 크기가 해당 요소의 수직방향으로 박스 (box) 를 넘어갈 때 어떻게 처리할지를 설정함

 

참고