[웹1]240206-18일차(position)
Create a New Pen
Behavior Auto Save If active, Pens will autosave every 30 seconds after being saved once. Auto-Updating Preview If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update. Format on Save If enabled, your co
codepen.io
https://codepen.io/limyena/pen/MWxXqVW
position
...
codepen.io
[absolute와 fixed특징]
** absolute와 fixed는 한가지 특징을 제외하고 전부 동일한 특징을 가지고있다.
1. absolute가 처음 적용되었을때 static상태인 위치에 고정되어있다.
2. absolute, relative, fixed는 위치속성으로 화면 특정 좌표에 고정될 수 있다.
ㄴx는 가로, y는 세로, z는 입체
ㄴ위치속성(left, right, top, bottom)
ㄴ absolute와 fixed는 위치속성으로 여백을 조정하는 경우가 많다. 위치속성이랑 margin속성을 함께 사용하진 않는다.
ㄴ relative는 특정한 상황이 아니라면 margin속성을 사용해서 여백값을 줘야한다.
ㄴ위치속성은 부모엘리먼트역할을 하고있는 태그를 기준으로 작동한다.
3. absolute와 fixed는 relative로 부모엘리먼트역할을 지정하기 전까지 body태그가 부모엘리먼트 역할을 한다.
4. absolute와 fixed는 적용되면 html상 부모엘리먼트를 벗어나게 된다. 벗어났을때 relative로 원하는 부모엘리먼트를 지정할 수 있다. 단, 상위엘리먼트들 중에서만 relative를 지정할 수 있다.
[부모엘리먼트 역할]
1.위치속성 좌표 제공(공간 제공)
2.너비높이 상속 제공
[relative]
- absolute나 fixed를 가둬놓을 수 있다.
- static처럼 일반적인 태그로 사용 가능하다.
- stativ과 다르게 위치속성을 사용해서 움질일 수 있다.
