[CSS][Layout][Positioned Layout][Absolute Positioning]

Absolute Positioning을 통해 흐름에서 벗어날 수 있다.

원래의 위치에서 완전히 벗어나며 레이아웃에 영향을 준다.

%는 사용 가능한 공간 기반

이걸 언제 쓰지?

툴팁, 드롭다운, 모달, 대화상자 등 명백히 문서 흐름에서 벗어난 요소들

기본 위치

만약 displacement를 설정하지 않으면?

원래 Flow Laout시 자기 위치에 쌓여 뒤에 오는 요소를 가린다.

<style>
  .box {
    position: absolute;
  }
</style>

<p>
  Lorem Ipsum is simply dummy text of
  the printing and typesetting industry.
  <span class="box">Hello World</span>
  It has survived not only five centuries,
  but also the leap into electronic
  typesetting, remaining essentially
  unchanged.
</p>

원래 자신의 위치에 쌓인다.

아래는 어떻게 그려질 지 생각해보자.

<p>This is a paragraph.</p>
<p>Another paragraph, with different words.</p>
<p>Finally, to complete the set, a third.</p>



<style>
p {
  position: absolute;
}
</style>

브라우저는 처음에 Flow Layout 기반으로 쌓아야 할 곳에 첫번째 요소를 둔다.

쌓은 녀석이 absolute positioning을 따르므로, 해당 요소는 레이아웃에 없는 것처럼 취급하고

같은 위치에 다음 요소를 쌓는다.

이를 반복한다.

세 개가 겹침

사이즈

div의 width가 정해져 있으면 그 이상은 overflow

 

 

중앙 정렬

Flow Layout에서 탑 바텀 오토마진은 0임.

Relative Positiong은 다 적용된다.

이와 같이 화면 가운데 정렬시켜보자.

<style>
.box {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100px;
  height: 100px;
  margin: auto;
  background: deeppink;
}
</style>
<div class="box"></div>

• absolute positioning (position: absolute)
• 각 모서리에서 같은 거리만큼 떨어짐. (ideally 0px)
• 고정 크기(고정 너비, 고정 높이)
• Hungry margins (margin: auto)

 

Containing Blocks

CSS 관점에서, 모든 Html 요소는 자신을 포함하는 Block 요소를 갖고 있다.

포함 블록은 요소 컨테이너의 경계를 형성하는 직사각형이다.

container가 포함 블록이다.

더 정확하게 말하자면, 단락은 포함 블록의 컨텐츠 박스에 포함된다.

플로우 레이아웃은 포함 블록을 사용하여 요소를 배치할 위치를 결정한다.

하지만 Absolute Positioning을 사용하면 좀 다르다.

top / left / right / bottom 속성을 설정하면, 포함 블록의 위치에서 displacement만큼 떨어진 곳에 위치하게 된다.

ex) : top: 0; left: 0는 왼쪽 위 구석

Flow Layout과 달리 부모에 관심을 기울이지 않는다.

절대 요소는 위치 지정 레이아웃을 사용하는 다른 요소에만 포함될 수 있다.

조상을 따라가며 Positioned Layout을 사용하는 첫번째 요소를 찾는다.

가장 먼저 발견된 블록이 포함 블록을 제공한다.

만약 없으면 뷰포트가 된다.

가장 가까운 조상 찾기

<div class="block">
  <div class="relative block">
    <div class="block">
      <div class="block">
        <div class="pink-box"></div>
      </div>
    </div>
  </div>
</div>

<style>
.block {
  padding: 16px;
  border: 2px solid silver;
}

.relative.block {
  position: relative;
  border-color: black;
}

.pink-box {
  position: absolute;
  top: 0px;
  right: 0px;
  background: deeppink;
  width: 50px;
  height: 50px;
}

</style>

1. 패딩은 무시한다 (Flow Layout 계산에 사용되나, 해당 요소는 Flow layout 계산에서 벗어나 있음.)

2. 가장 가까운 Positioned Layout 사용 조상을 찾는다. (absolute, fixed, sticky, relative)

 

 

 

 

 

예제 : 물방울 보더

연습예제.

<style>
.box {
  height: 150px;
  margin: 64px;
  border: 4px solid palevioletred;
  position: relative;
}


.circle {
  position: absolute;
  border-radius: 50%;
  border:inherit;
}
.big.circle{
  width:80px;
  height:80px;
  top:-40px;
  left:-40px;
  background-color:white;
}
.medium.circle{
  width:60px;
  height:60px;
  /* 큰 원 반지름만큼.*/
  top: 40px;
  /* 자신 반지름만큼 */
  left:-30px;
  background-color:white;
}

.small.circle{
  width:30px;
  height:30px;
  /* 자신 반지름만큼 */
  top: -15px;
  /* 큰 원 반지름만큼.*/
  left:40px;
  background-color:white;
}
</style>
<div class="box">
  <div class="big circle"></div>
  <div class="medium circle"></div>
  <div class="small circle"></div>
</div>

예제 : 툴팁

툴팁이나 드롭다운과 같은 floating 요소들은 레이아웃에 영향을 주지 않도록 문서 흐름에서 제거해야 한다.

만들 툴팁의 요구사항은 다음과 같다 :

트리거의 가장자리와 정렬되어야 하며, 최소 150px 이상의 너비를 같는다.

<p>
  The traditional Japanese tea ceremony
  centers on the preparation, serving,
  and drinking of
  <a href="/" class="tooltip-trigger">
    matcha
    <span class="tooltip">
      A concentrated, powdered form of
      green tea
    </span>
  </a>
  as hot tea.
</p>

포함 블록 스타일

• 먼저 a를 inline-block으로 만든다.
  • inline요소는 줄바꿈 등이 일어나기에 레이아웃 요소로 사용하기 어렵다.
  • a에 inline-block을 적용하면, a는 자기 자신을 블록 요소처럼 취급한다. (외부에서 보기에는 인라인 요소지만)
• 툴팁에는 display:block 속성이 있기 때문에, 맞춰서 새로운 줄에 정렬된다.
• 툴팁에는 absolute를 적용할 예정이기에, position:relative를 적용한다. 

  .tooltip-trigger {
    font-weight: bold;
    color: seagreen;
    text-decoration: none;
    /* 중요 - 왼쪽 정렬을 위함*/
    display:inline-block;
    /* 중요 - 툴팁을 절대 요소로 만들 것임. */
    position:relative;
  }

툴팁 스타일

position:absolute를 사용하면, 블록이어도 자신의 크기를 최대한 줄이려는 경향이 있다.

따라서 min-width를 정해주면 좋다.

  .tooltip {
    /* Hide the tooltip by default */
    display: none;
    background: white;
    border: 1px solid;
    /* 중요 - 다른 레이아웃에 영향을 미치지 않기 위함. */
    position:absolute;
    min-width:150px;
  }

  /*
    Show the tooltip when hovering
    over the wrapper:
  */
  .tooltip-trigger:hover .tooltip {
    display: block;
  }

다음과 같이 된다.