下記のように、margin-topを設定すると、ヘッダーが下がってしまいます。
本当によく分からず、調べても出てこず、かなり抽象的ですが、よろしくおねがいします。
検証したものが以下になります。
html
1 <div class="big"> 2 <div class="container"> 3 <div class="show-texts"> 4 <%= @post.content %> 5 </div> 6 </div> 7</div>
css
1.container { 2 background-color: white; 3 margin: 0 auto; 4 width: 700px; 5 height: 500px; 6 border: 10px solid #f5f5f5; 7 margin-top: 100px; 8}
html
1 <header> 2 <div class="header-left"> 3 <p>ChatSpot</p> 4 </div> 5 <div class="header-right"> 6 <ul> 7 <li> 8 <%= link_to("投稿一覧", "/posts/index") %> 9 </li> 10 <li> 11 <%= link_to("新規登録", "/signup") %> 12 </li> 13 </ul> 14 </div> 15 </header>
css
1 header { 2 height: 75px; 3 width: 100%; 4 background-color: #4169e1; 5 position: absolute; 6 z-index: 1; 7 display: flex; 8 justify-content: space-between; 9}
ruby
回答1件
あなたの回答
tips
プレビュー