기초: position 부분

 z index가 동작이 안되는데 무슨 문제인지 계속 봐도 이해가 안가서요. ㅜㅜ
<div class="main-background">
                <h4 class="main-title">Buy our shoes!</h4>
                <p class="main-content">Lorem ipsum dolor sit amet, consectetur 
                adipisicing elit. Velit maxime, cumque eveniet voluptates accusamus tenetur quia aliquid inventore, dolorem ratione impedit laudantium fuga maiores! Dolores eligendi doloribus ab, atque assumenda! </p>
                <button class="main-btn">click me!</button>
            </div>
            <div class="explain-box">
                <h3>How we design our shoes</h3>
                <p> Lorem ipsum dolor sit amet, 
                consectetur adipisicing elit. 
                Itaque reprehenderit veniam 
                accusamus, quos, consectetur quia. 
                Sequi ipsa, dolor adipisci veritatis 
                maxime beatae animi quos assumenda 
                blanditiis consequuntur, possimus. 
                Aliquid, maiores?</p>
            </div>

body {
    margin: 0;
}

.main-background {
    width: 100%;
    height: 500px;
    background-image: url("../0_img/shoes.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(80%);
    padding: 1px;
    text-align: center;
    position: relative; /* 부모 컨텍스트로서 relative */
    z-index: 1; /* 뒤로 보낼 수 있도록 설정 */
}

.main-title {
    color: white;
    margin-top: 60px;
    font-size: 40px;
}

.main-content {
    color: white;
}

.main-btn {
    padding: 15px;
    font-size: 20px;
    background-color: white;
    border: none;
    border-radius: 5px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 150px;
    top: 200px;
    z-index: 100; /* 버튼을 가장 앞에 오게 설정 */
}

.explain-box {
    width: 700px;
    margin: auto;
    padding: 20px;
    text-align: center;
    background-color: #eee;
    position: relative;
    top: -280px;
    z-index: 50; /* 버튼보다 뒤로 설정, 배경보다 앞에 설정 */
}