position absolute / relative

테이블 두개를 만들어서 겹쳐놓으려고 찾아봤더니 하나는 position absolute / 하나는 relative하면 된다고 해서 잘 되긴했는데

문제는 여기에 클릭이벤트를 달려고 봤더니 순서가 어떻게 지정되는지가 좀 다름

결론 

position은 겹치는 순서를 정하진 않음 - position을 static 제외하고 다른걸로 하면 그냥 쌓는걸 가능하게 해주는거임 

<div position 기본인거>  <<<  <div position 다른거> - 이게 더 위로 쌓임

• 만약에 다 position을 지정해놨다면 z-index로 순서를 정해주면됨 - 숫자값이 높을수록 위에쌓임
• 하지만 이게 심심찮게 적용이 잘 안되는거 같음.. 다른 조건이 필요하다고함
• 그러면 position도 정하고 z-index도 똑같으면? 코드 순서 따라감
• 제일 밑에줄에 있는게 가장 위로쌓임 - 제일 위에있는것만 클릭 이벤트 발생함(생각해보니 당연한거같음)

 

• (정확하지 않음) absolute는 기본 흐름에서 제거돼서 부모의 위치가 기준
• relative는 원래 본인 자리가 기준 
• 원래 <div></div> <div></div> 하면 가로로 두개의 박스가 안겹치고 생성되는데 첫번째 div가 기본 흐름에서 제거되니까 두번째 div는 원래 본인자리가 첫번째인거 - 그래서 겹침