position

sisun·2023년 4월 15일

HTML

목록 보기

10/16

`position:`

문서에서 요소가 배치되는 방식을 결정한다.
원하는 위치설정을 위해 top,bottom,lefrt,right속성과 함께 사용한다

:static; 스태틱 (기본값)

position은 기본적으로 static을 가지고 있다.
html의 정의된 순서대로 겹치지 않고 배치된다.
컨테이너를 바꾸고 싶다면 밑에 relative, absolute를 사용해야 한다.

:relative; (렐러티브)

원래 있어야하는 위치를 기준으로 움직인다.
다른요소와 겹치게될수도 있고 맨 윗층에 정렬된다.
⇒position:relative; top:20px; left:40px;

:absolute; (앱솔루트)

부모요소를 기준으로 움직인다. 즉, 가까이 있는 위에 상자를 기준으로 움직임.
만약 부모태그중 position설정이 있는 태그가 없다면 body태그의 좌측상단 기준으로 움직이게 된다.

:relative;가 자기 자리를 유지하면서 움직인다면,
:absolute;는 자기자리가 없어져서 완전히 독립된 존재처럼 움직이게 된다.

:fixed;

내가 담겨있는 상자를 벗어나 페이지를 기준으로 움직인다.
:absolute;와 마찬가지로 독립된 존재가 된다.
뷰포트 기준으로 상하좌우 값을 조정한다.

:sticky;

원래 자기 자리에 있으며, 스크롤을 움직여도 화면에 고정된 요소를 표현할때 사용한다.
뷰표트 안에 해당 요소가 전부 보이는 상황이라면 마치 static처럼 보이지만 스크롤을 움직여 가려지게 될 타이밍에 뷰포트를 쫓아온다.

부모요소를 벗어나면 sticky가 풀리고 부모요소의 마지막에 고정된다.

⛔ 1.상하좌우값중 하나라도 있어야 적용이 된다. 왼쪽상단에 고정한다면 top:0을 주도록 한다.
2.position: -webkit-sticky; 브라우저 호환을 확인한다
3.부모,조상중 overflow:(hidden,scorll,auto);를 갖고있다면 :sticky;가 작동하지 않는다
4.부모가 높이값을 가지고 있어야 한다.(auto,값 등)
퍼센트값이거나 설정이 없으면 작동하지 않는다

이걸 피하기만 하지 않고 역이용하여 특정부위에서는 다시 사라지도록 커스텀할수도 있다!
예를들면 원하는 위치로 이동시키기 위해 부모요소를 이동시키거나

z-index: 우선순위;

position속성으로 겹쳐진 요소들의 정렬 순위를 만든다.
반대로 position이 static이거나 position이 없으면 적용되지 않는다.

가장 밑에서부터 1로 시작하고 숫자가 가장 높은것이 맨 위로 오게된다.
음수를 줘서 내려가도록 설정할수도 있다. 소수점도 가능하나 잘 사용하지 않는다.

opaacity (투명도)

opacity: 숫자;
1이 디폴트(투명도 0퍼센트) 기준으로 0.5; 와 같은 식으로 값을 넣는다.

이미지에 사용할때
img{
opacity: 0.5;
}
이미지의 투명도를 조절한다.
img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}
평소에 흐린상태였다가 커서를 갔다댈 때 선명해지는 효과를 만들수 있다.

박스요소에 사용할때

div {
  opacity: 0.5;
}
박스와 박스안에 든 요소들을 전부 투명하게 만든다.
div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
백그라운드 색상을 rgba값으로 설정하여 오퍼시티를 줄수있다.

이처럼 사진위에 반투명한 텍스트박스를 만들수도 있다.