17.Stikcy vs Fixed에 대한 진실
1. Stick vs Fixed
1. Sticky
-
Sticky : Sticky 속성은 최초에 relative 속성처럼 동작하다가 스크롤이 특정 지점에 도달하면 요소를 고정(fixed) 시킬 수 있습니다.
- realtve 속성
- relative도 마찬가지로 붕 뜨지만 다른자식요소들이 인지를 하여 다른 요소들의 위치에 변화에 영향을 주지 않는다.
- 기준점이 원래있던 자리
-
top,left 등을 꼭 써야함
- 인터넷익스플로어등 많은곳에서 sticky를 지원 안함
- realtve 속성
<body>
<header class="nav__container">
<nav class="nav__bar">
<ul>
<li>안녕</li>
<li>안녕</li>
<li>안녕</li>
<li>안녕</li>
</ul>
</nav>
</header>
<section class="section--blue"></section>
<section class="section--red"></section>
</body>
.nav__container {
width: 100%;
height: 700px;
background-color: black;
}
.nav__bar {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: red;
}
.section--blue {
background-color: blue;
height: 700px;
}
.section--red {
background-color: red;
height: 700px;
}
- navbar에 sticky 를 주었는데 그 결과 container의 높이 이상으로는 내려가지 않는 현상을 보여준다. 그 이유는 sticky를 사용한 선택자의 기준점의 최대는 그것을 덮고 있는 테그의 높이이기 때문이다.
2. Fixed
-
Fixed : Fixed 속성은 화면의 절대적인(absolute) 위치로 존재하며, 스크롤을 내려도 처음 위치한 곳에 고정(fixed) 되어 보이게 됩니다.
- 절대적인(absolute) 위치
- absolute는 float와 마찬가지로 떠있는다고 했다. absoulte 상세
- 기준점이 viewport
- 절대적인(absolute) 위치
<body>
<header class="nav__container">
<nav class="nav__bar">
<ul>
<li>안녕</li>
<li>안녕</li>
<li>안녕</li>
<li>안녕</li>
</ul>
</nav>
</header>
<section class="section--blue"></section>
<section class="section--red"></section>
</body>
.nav__container {
width: 100%;
height: 700px;
background-color: black;
}
.nav__bar {
position: fixed;
width: 100%;
height: 100px;
background-color: red;
}
.section--blue {
background-color: blue;
height: 700px;
}
.section--red {
background-color: red;
height: 700px;
}
- navbar에 fixed 를 주어서 viewport 기준이기 때문에 항상 화면의 상단에 위치하는것을 볼수가 잇다. 하지만 안타깝게도 absolute로 동작하기에(float처럼 띄움) 다른요소들이 navbar 밑으로 들어가버리는 현상이 발생했다.
Leave a comment