div와 버튼을 정렬하고 모달 기능을 유지하십시오.

Question

저는 CSS을 처음 사용합니다. 그래서 이것은 아마도 기본적인 질문 일 것입니다. 그러나 나는 도처에서 수색을하고 완전히 멈췄습니다.

나는 div과 두 개의 버튼이 있습니다. 버튼 하나가 모달을 엽니 다. 이 정도면 효과가 있습니다.

div을 내 버튼 위에 수직으로 정렬시킬 수 없습니다. 모든 것을 새 부모 div에 넣으면 모달/버튼이 서로 겹쳐져 작동하지 않습니다.

내 코드는 여기에 있습니다 : https://jsfiddle.net/k3eL99ub/

<div id="page1" class="landing-page"> 
    <a id="link-lp"></a> 
    <div class="logo-sketch">Logo here</div> 
    <button id="about-button">about</button> 
    <button id="work-button">work</button> 
    <div id="about-modal"> 
    <div id="about-modal-content"> 
     <span class="close">&times;</span> 
     <p class="about-text">stuff here</p> 
    </div> 
    </div> 
</div> 

.landing-page { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.logo-sketch { 
    position: relative; 
    clear: both; 
    border: 2px solid black; 
} 

button { 
    display: inline; 
    border: none; 
    background: none; 
    outline: none; 
    font-family: Montserrat; 
    font-size: 1.3em; 
    text-decoration: none; 
    text-align: center; 
    cursor: pointer; 
    width: 10%; 
} 

.about-button { 
    float: left; 
    margin-right: 50px; 
} 

button.work-button { 
    float: right; 
    margin-left: 50px; 
} 


/*about modal styling*/ 

#about-modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

#about-modal-content { 
    background-color: #fff; 
    margin: auto; 
    padding: 20px; 
    border: 2px solid #000; 
    width: 50%; 
    text-align: left; 
} 

.close { 
    color: #000; 
    float: right; 
    font-size: 32px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    text-decoration: none; 
    cursor: pointer; 
} 

감사합니다!

Answer 1

HTML 구조를 변경하는 가장 쉬운 방법은 여러 가지가 있습니다. 이 같은 예를 들어 :

여기

<div class="logo-sketch">Logo here</div> 
    <div id="page1" class="landing-page"> 
     <a id="link-lp"></a> 

     <button id="about-button">about</button> 
     <button id="work-button">work</button> 
     <div id="about-modal"> 
     <div id="about-modal-content"> 
      <span class="close">&times;</span> 
      <p class="about-text">stuff here</p> 
     </div> 
     </div> 
    </div> 

당신은 로고가 버튼 위에되고 싶어 JSFindle https://jsfiddle.net/987sp7ex/