3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
HTML <body style="margin: 0;"> <div class="main-background"> <h4 class="main-title">Buy Our Shoes!</h4> <p class="main-text">Very cool and nice shoes! very good!</p> <button class="main-button">구매하기</button> </div> <div class="explain-box"> <h4>how we design our shoes</h4> <p>how we design our shoes?how we design our shoes?how we design our shoes?how we design our shoes?</p> </div> </body>
CSS
.main-background { width: 100%; height: 500px; background-image: url(img/shoes.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; filter: brightness(70%); padding: 1px; }.main-title { color: white; font-size: 40px; margin-top: 50px; margin-bottom: 20px; text-align: center; }.main-text { color: white; font-size: 20px; margin-top: 10px; text-align: center; }.main-button { padding: 15px; font-size: 20px; background: white; border: none; border-radius: 5px; position: absolute; left: 0; right: 0; margin: auto; /* 가로 중앙 정렬 */ width: 150px; z-index: 2; /* explain-box보다 위에 위치하도록 조정 */ }.explain-box { width: 700px; margin: auto; padding: 20px; text-align: center; background-color: #eee; position: relative; top: -300px; z-index: 1; } 혹시 잘못 작성한 부분 있나 체크도 계속 하고 아예 그냥 새로 작성도 해봤는데 아무리 해도 main-button(구매하기 버튼)이 explain-box보다 위에 오게 배치가 안됩니다 ㅠㅠㅠㅠ 대체 어느부분이 잘못된건지 모르겠습니다.
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.