position:
문서에서 요소가 배치되는 방식을 결정한다.
원하는 위치설정을 위해 top,bottom,lefrt,right
속성과 함께 사용한다
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,값 등)
퍼센트값이거나 설정이 없으면 작동하지 않는다
이걸 피하기만 하지 않고 역이용하여 특정부위에서는 다시 사라지도록 커스텀할수도 있다!
예를들면 원하는 위치로 이동시키기 위해 부모요소를 이동시키거나
position속성으로 겹쳐진 요소들의 정렬 순위를 만든다.
반대로 position이 static이거나 position이 없으면 적용되지 않는다.
가장 밑에서부터 1로 시작하고 숫자가 가장 높은것이 맨 위로 오게된다.
음수를 줘서 내려가도록 설정할수도 있다. 소수점도 가능하나 잘 사용하지 않는다.
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값으로 설정하여 오퍼시티를 줄수있다.
이처럼 사진위에 반투명한 텍스트박스를 만들수도 있다.
연습글 > https://velog.io/@si9138/posotion
https://velog.io/@si9138/background-image