선생님 안녕하세요. 수업 열심히 듣고 있습니다.
대문 밑에 설명문을 겹치도록 배치 하는 수업 중에
html 내용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main-background">
<div class="main-title-box">
<h3 class="main-title">Buy our shooes!</h3>
<p class="main-content">가나다라마바사가나다라마바사가나다라마바사가나다라마바사가나다라마바사가나다라마바사가나다라마바사가나다라마바사가나다라마바사가나다라마바사가나다라마바사</p>
</div>
<div>
<button class="main-button position">버튼1</button>
</div>
<div class="explain-box">
<h4>How we design</h4>
<p>hahahahaha</p>
</div>
</div>
</body>
</html>
css 내용
.main-background {
width: 100%;
height: 500px;
background-image: url(../img/shoes.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 20px;
position: relative;
text-align: center;
}
body {
margin: 0px;
}
.main-title {
color: white;
text-align: center;
font-size: 30px;
}
.main-title-box {
margin-top: 150px;
text-align: center;
}
.main-content {
padding: 30px;
color: white;
font-size: 18px;
}
.main-button {
padding: 10px;
font-size: 18px;
font-family: 'nanumsqure';
background-color: white;
border: none;
display: block;
margin: auto;
}
.position {
position: absolute;
bottom: 90px;
left: 0;
right: 0;
margin: auto;
width: 150px;
}
.explain-box {
width: 700px;
margin: auto;
padding: 20px;
text-align: center;
background-color: grey;
position: relative;
top: : 500px;
}
이와 같이 작성 하면 <div class="explain-box">가 <button class="main-button position">버튼1</button>아래에 위치 하지 않고, 겹쳐 있는 상태가 됩니다. 어디가 잘못된 것인가 해서 질문 드립니다. 감사합니다.
