divボックスとCSSグリッドの整列の問題

Question

グリッドとHero画像を使用してブログ用のカスタムWordPressを作成したいとします。

これは私のHTMLです：

<div class="site-wrapper"> 

     <div class="section site-menu">MenuItem 1 | MenuItem 2 | MenuItem 3 | MenuItem 4</div> 

    <div class="section site-header"> 
    <div class="hero"> 
     <div class="hero-content"> 
     <h1>If you can dream it, you can do it...</h1> 
     <p class="subhead">lets do it !</p> 
     </div> 
     <div class="bottom-right">This text should be positioned at the bottom right of the Hero Image</div> 
    </div> 
    </div>    

     <div class="section undefined"> 
      <div class="undefined-content"> 
       undefined 
      </div> 
     </div> 

     <div class="section site-footer">Footer</div> 

    </div> 

これは、CSSコードです：

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.site-wrapper { 
    display: grid; 
    grid-template-columns: 1fr; 
} 

.site-menu { 
    background-color:#000; 
    color:#fff; 
    position: absolute; 
    padding: 8px 20px 9px; 
    width: 100vw; 
} 

.hero { 
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg'); 
    background-size:cover; 
    background-position: center; 
    width: 100wh; 
    height: 100vh; 
    display: flex; 
} 

.hero-content { 
    background-color:#000; 
    color:#fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    flex-directon: column; 
    margin: auto; 
} 

私はそれのためにcodepenをも作成しました。

私は複数の問題があります。

1. マイメニューは私のイメージよりも広くなっています。

2. 真ん中のテキストは、私のヒーローイメージの中心に配置されておらず、h1と<p class="subhead">は、それらの間ではなく、並べて表示されます。

3. <div class="bottom-right">は表示されません。私はイメージの右下にそれを置いておきたいと思います。

Answer 1

変更を加えて以下のコードを添付しました。

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.site-wrapper { 
    position: relative; 
    display: grid; 
    grid-template-columns: 1fr; 
} 

.site-menu { 
    background-color:#000; 
    color:#fff; 
    position: absolute; 
    padding: 8px 20px 9px; 
    width: 100%; 
    z-index: 1; 
} 

.hero { 
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg'); 
    background-size:cover; 
    background-position: center; 
    width: 100wh; 
    height: 100vh; 
    display: flex; 
} 

.hero-content { 
    background-color:#000; 
    color:#fff; 
    display: block; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    flex-directon: column; 
    margin: auto; 
} 

.bottom-right { 
    position: absolute; 
    right: 0; 
    margin-top: -1.2em; 
    background: black; 
    color: white; 
} 

https://codepen.io/bartholomewdavid/pen/Xedjow

1）それが問題を引き起こす可能性の幅のために100vw使用。理由は、スクロールバーを含むビューポートの100％を占めるからです。したがって、幅1のスクロールバーが追加されました。私はそれを100％に変更しました。

2）2つの理由からflexboxのコンテンツのセンタリングが機能していませんでした。 最初に、2つのものが水平にセンタリングされているため、オフセットの外観になっています。

.bottom-leftコンポーネントを親の外に移動し、それを垂直方向に少しずらして背景イメージの上に表示しました。

最終的には、サブ見出しの横に中央揃えのテキストが表示されました。これを修正するには、display：flexを削除してください。

Answer 2

は、以下のようにコードを変更し

：

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.site-wrapper { 
    display: grid; 
    grid-template-columns: 1fr; 
} 

.site-menu { 
    background-color:#000; 
    color:#fff; 
    position: absolute; 
    padding: 8px 20px 9px; 
    width: 100%; 
} 

.hero { 
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg'); 
    background-size:cover; 
    background-position: center; 
    width: 100wh; 
    height: 100vh; 
    display: flex; 
} 

.hero-content { 
    background-color:#000; 
    color:#fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    flex-direction: column; 
    margin: auto; 
} 

.bottom-right { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}