fixed 질문 채택완료
뮨스비
5년 전
조회 2,078
</p>
<p><!DOCTYPE html></p>
<p><html lang="en"></p>
<p><head></p>
<p> <meta charset="UTF-8"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p> <meta http-equiv="X-UA-Compatible" content="ie=edge"></p>
<p> <link rel="stylesheet" href="style.css"></p>
<p> <title>Code Challenge</title></p>
<p></head></p>
<p><body></p>
<p> <!-- 빨간박스 --></p>
<p> <div class="pink-box"></div></p>
<p> <!-- 파란박스 --></p>
<p> <div class="blue-box">This is the day one</div></p>
<p> <!-- 노란박스 및 초록박스 --></p>
<p> <div class="yellow-box"></p>
<p> <div class="green-box"></div></p>
<p> </div></p>
<p> </p>
<p></body></p>
<p></html></p>
<p>
</p>
<p>body{</p>
<p> height: 1500px;</p>
<p> position: relative;</p>
<p> padding: 0;</p>
<p> margin: 0;</p>
<p>}</p>
<p>.pink-box{</p>
<p> width: 100%;</p>
<p> height: 200px;</p>
<p> background-color: pink;</p>
<p> position: fixed;</p>
<p> z-index: 1;</p>
<p>}</p>
<p>.blue-box{</p>
<p> width: 75%;</p>
<p> height: 100%;</p>
<p> background-color: blue;</p>
<p> position: absolute;</p>
<p> top: 200px;</p>
<p> padding: 50px;</p>
<p> box-sizing: border-box;</p>
<p> color: #fff;</p>
<p> font-size: 40px;</p>
<p> font-weight: bold;</p>
<p>}</p>
<p>.yellow-box{</p>
<p> width: 25%;</p>
<p> height: 100%;</p>
<p> top: 200px;</p>
<p> background-color: yellow;</p>
<p> position: absolute;</p>
<p> right: 0;</p>
<p> box-sizing: border-box;</p>
<p> border: 5px solid gray;</p>
<p>}</p>
<p>.green-box{</p>
<p> width: 150px;</p>
<p> height: 70px;</p>
<p> background-color: green;</p>
<p> position: absolute;</p>
<p> top: -35px;</p>
<p> left: -75px;</p>
<p> z-index: 3;</p>
<p>}</p>
<p>
여기에서 green-box 를 fixed 하여 pink박스와 동일하게 내려오게 하고싶은데요
반응형에 맞게 움직이면서 스크롤 내릴시 pink 박스와 같이 내려오게 하는 방법이 없을까요 ?
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인