css position 으로 띄우기+정렬공식

posiion : 레이어개념. 부모의 엘리먼트 (element:요소) 에 구애받지 않고 자유롭게 배치할 수 있다.

속성으로 relative(비교상의 상대적인) , absolute(비교대상이없는), fixed (고정된), 3가지가 있다

 

 

position: relative	position: absolute;	position: fixed;
부모의  기준점  or 제자리띄우기 (absolute의 기준이 된다.)	부모에게 기준점 적용	창 기준 / 기준변경 불가 창고정 레이어
	기준안에서 다른 요소와 겹칠때 사용 블럭이 되며 크기는 내용만큼 줄어듬 좌표값 없음 > 자신이 기준 좌표값 있음 > 기준요소를 따라 위치가 변경 바깥 요소에 기준이 없을경우 창 기준 부모안의 모든 요소가 absolute일 경우 부모높이는 0, 높이 잡아야함 결론-부모, 조상중 먼저 자신을 감싼 요소에 position 속성이 있으면 기준임 좌표에 양수값은 기준 안으로 들어감 음수값은 기준 밖으로 벗어남 right, bottom, 사용시 요소기준점이 오른쪽 아래로 변경됨 margin: 0 auto; 적용X > 정렬공식 이용	fixed 적용시 크기가 내용만큼 줄어들기떄문에 width 값 설정   fixed 레이어는 z-index 를 9999처럼 큰수를 적어야함 fixed 레이어는 창크기가 작을경우 스크롤로 볼수없음 창기준이므로 #wrap {   min-width: 1280px;   height: 1500px; } min-width가 적용되지않음 (태그에  min-width 다시적용)

 

height:100% 적용여부
일반요소	position:absolute	position:fixed
부모에 높이가 있을때만 height % 가능	기준요소의 높이만큼 height % 가능	창기준이므로 height % 가능

 

 

---

 

 

포지션 정렬공식

포지션 요소는 나중에 나온 요소가 위로 쌓임.

 

z-index 포지션 요소의 겹친순서를 바꿀때 사용

• z-index:auto; 기본값. 포지션에만 씀. 단위X.)
• 최소단위 100이상 양수값 사용할것 (z-index: 100;)
• z-index 음수사용시 기준에 z-index가 없으면 body바로 위까지 내려감 (-index: -1;)
• 포지션요소는 부모의 패딩적용X
• left, right로 가로길이 top, bottom 으로 높이지정

   .gnb_wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -117px;
    margin-top: -28px;
    z-index: 100;
    }

---

 

포지션 정렬공식2

컨텐츠의 요소가 항상 정 가운데로 가도록 지정 (로고를 항상 가운데 띄울경우 등등)

.main_slider a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

 

하단 링크 참조

https://hyojinny.tistory.com/46

 

CSS -transform: translate(-50%,-50%) 정렬공식