[HTML/CSS] position정렬, 이슈사항 해결

 

position :레이아웃 배치, 객체를 위치시킬 때 사용할 수 있는 속성

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

웹 페이지의  포인트 화면 부분이 익스 8,9일 때와 익스 10,11일 때가 맞지 않았다.

 

원인)

디버깅 화면을 통해 본 결과,,/해결방법

1. padding에 px단위에 적혀 있지 않았다.

2. 빨간줄이 뜬 에러부분을 해결하지 않았다. (에러나면 그 부분은 화면에 적용이 안된다)

3. position을 준다.

 

해당 jsp클래스에 위의 사항을 전부 적용해 주니 잘 해결되었다.

<table style="padding : 0 0 0 2px; position:relative; left:40px;">

</table>

 

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

- position : static

초기값으로 위치를 지정하지 않을 때와 같다.

top, bottom, left, right 속성값이 적용되지 않는다.

 

- position : relative

위치 계산을 할 때 static의 원래 위치부터 계산

top, bottom, left, right의 위치를 같이 설정할 수 있음

ex)

#relative  {    position:relative;       left:100px; }

 

- position : absolute

relative와 달리 문서의 원래 위치와 상관없이 위치를 지정할 수 있다.

하지만 가장 가까운 상위 요소를 기준으로(단, static제외) 위치가 결정됨

상위 요소가 없으면 위치는 html를 기준으로 설정됨.

top, bottom, left, right의 위치를 같이 설정할 수 있음

 ex)

#position  {    position:absolute;       left:100px; }

- position : fixed

브라우저 화면의 상대 위치

따라서 화면이 바뀌더라도 고정된 위치를 설정 가능(상위 요소에 영향 받지 않음)

top, bottom, left, right의 위치를 같이 설정할 수 있음