[HTML/CSS] 컴알못의 도전기 13일차

 

 

 

 

 

원하는 곳에 요소 고정하기

 

 

팝업 만들기

기존의 규정된 위치 그 위에 출력되는 결과물을 위해 position를 활용한다.

 

css에서 position 속성은 static이 기본 설정이다. 그 밖에는 relative, absolute이 있다.

이 속성들에서는 left, right, top, bottom의 추가적인 설정이 필요하다.

 

• relative: 현 상태에서 위치 변화

 

• absolute: 사이드바 제작시 활용(페이지에 그대로 붙어있음), 스크롤에 종속적

 

 

 

 

 

👾 스크롤 

class b에서 height가 1500px, 스크롤 내려도 텍스트는 상단에 고정되어서 보이지 않는다.

 

 

 

class a에서 position이 fixed인 경우 스크롤 내리면 텍스트도 따라 움직인다.

 

 

 

😲 팝업

 

 

 

팝업이 안보이는 상태 설정: display none

(반대의 경우는 display block)

 

 

 

 

. bg (background class)의 position이 fixed가 아닌 absolute인 경우 스크롤을 하면 위의 설정된 값들이 상단에 고정되어 나타나지 않는다.