포지션 (absolute)
출처 : https://www.daleseo.com/css-position-absolute/
www.daleseo.com
- 엘리먼트를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 엘리먼트 위에 겹쳐서 배치할 수도 있습니다.
- 단, 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 엘리먼트를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.
출처 : https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
(CSS) CSS 포지션(position) - static, relative, absolute, fixed
안녕하세요! 이번 시간에는 지난 시간에 다루지 못했던 포지션에 대해 알아보겠습니다! 양이 조금 많고, 중요한 내용이기 때문에 따로 뺐습니다. 포지션이란 이름처럼 태그들의 위치를 결정하는 CSS입니다. static 일단 모든 태그들은 처음에 position: static
www.zerocho.com
relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면,
absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직임.
만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨.
[CSS] position 속성이 absolute인 경우 상위 레이어 또는 전체 윈도우 기준 정렬방법
안녕하세요. position 속성이 absolute인 경우 정렬을 맞추는 방법입니다. 해당 요소의 position이 absolute일때 정렬하는 방법은 relative와는 다른 방법을 사용해야 합니다. absolute일 경우의 특징을 고려해서 레이아웃을 설정해야 하는데요... 1. position 속성이 absolute? ; absolute 속성이 되는 경우 주변의 다른 레이어 객체들과 상관하지 않은채 정렬이 가능하게 됩니다. 예를 들어 position이
webisfree.com
바로 한단계 상위 레이어를 기준으로 정렬하는 방법
; 이 때는 선택된 레이어가 top, bottom, left, right 속성을 가져서는 안됨. 그렇게 되면 전체 윈도우를 기준으로 정렬되기 때문에 margin값을 사용하여 레이어를 이동해야만 가능.
하지만, 상위 레이어를 기준으로 정렬할 때 left, right, top, bottom을 사용할 수 있는 방법이 있음. 그렇게 하려면 부모 요소의 position 속성에 relative 값을 추가해주면 가능.