까먹는것: absolute positioning과 speech bubble effect

세 번 같은 것을 검색하는 것을 막기 위해서 여기에 기록함.

1. absolute positioning

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block

2. If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

absolute가 설정된 element는 static이 아닌 위 요소의 패딩 박스를 기준으로 위치를 잡는다.(fixed, absolute, relative or sticky)

따라서,

어떠한 요소를 컴포넌트 바깥으로 위치시키고 싶다면, 해당 컴포넌트의 상위에 position: relative를 두고 absolute는 해당 컴포넌트의 안에 둔다.

//inner comp Panel
<section> // 이곳에 선언하는 것이 아니라
  ...
  {showMenu && (
     <div className="absolute -right-2 z-10 top-[100%] ">
       <div className="bg-[var(--ModalMenuBG)] speech-bubble">
         <ul className="flex text-white flex-col w-full text-center justify-evenly h-full">
           <li>list1</li>
             <li>list2</li>
         </ul>
       </div>
     </div>
                            )}
</section>

//outer
<div className="relative"> // 이곳에 둬서 내부 컴포넌트의 바깥으로 나갈 수 있게 한다.
	<Panel />
</div>


// top-[100%] absolute에 이것을 넣어 줌으로써 absolute가 위치한 inner comp의 맨 아래쪽으로 위치시킨다.
// bottom-0이 아닌 이유는 
top은 시작점을 뒤 밸류로 받기 때문에 relative 요소의 마지막을 잡을 수 있고, 
bottom-0은 시작점을 (relative 요소의 마지막 - relative 요소의 높이) 잡기 떄문이다.

또한 다시 찾아본 speech bubble 효과.

.speech-bubble:before {
	content: '';
	position: absolute;
	top: 0;
	left: 80%;
	width: 0;
	height: 0;
	border: 6px solid transparent; 
    // border 로 삼각형의 길이를 설정하고 top 과 left를 0으로 만들어서 삼각형처럼 보이게 하는것
	border-bottom-color: var(--ModalMenuBG);
	border-top: 0;
	border-left: 0;
	margin-left: -15px;
	margin-top: -6px;
    transform: rotateY(180deg);
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 80%;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-bottom-color: var(--ModalMenuBG);
	border-top: 0;
	border-left: 0;
	margin-left: -10px;
	margin-top: -6px;
}