内容が移動するナビゲーションバー

Question

私は問題に遭遇しましたが、私はこれに似た何かを見つけることができません。

私のナビゲーションバーはheaderです。 私のページのコンテンツはbodyで、divは.page-contentとなります。

それが離れてナビゲーションバーから動くので、私は、margin-topと私のコンテンツを移動すると、ナビゲーションバーが続きます。彼らは同じクラスか何かにいないのですが。私が間違っているかもしれないことがありますか？

コード：

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-decoration: none; 
 
} 
 
header { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #5d585d; 
 
    margin-top: 0px; 
 
} 
 
body { 
 
    margin: auto; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 
nav { 
 
    margin-top: 0px; 
 
} 
 
nav ul { 
 
    float: right; 
 
    margin-top: 20px; 
 
    margin-right: 150px; 
 
    height: 25px; 
 
} 
 
nav ul li { 
 
    list-style: none; 
 
    float: left; 
 
    margin-right: 20px; 
 
    display: inline-block; 
 
} 
 
nav ul li a { 
 
    color: white; 
 
    font-family: Arial; 
 
    font-size: 16px; 
 
} 
 
nav { 
 
    margin-top: 0px; 
 
} 
 
.page-content { 
 
    margin-top: 40px; 
 
} 
 
.page-content { 
 
    background-color: rgba(255, 255, 255, 0.23); 
 
    margin: 0 auto; 
 
    margin-top: 300px; 
 
    width: 50%; 
 
    display: table; 
 
    border: 1px solid red; 
 
    color: white; 
 
} 
 
.page-content p { 
 
    margin: 0 auto; 
 
    margin-top: 60px; 
 
    display: table; 
 
    border: 1px solid red; 
 
} 
 
.dropdownmenu { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropbtn { 
 
    background-color: #b4efed; 
 
    color: #2a6d85; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #cbfffd; 
 
}

<header class="navbarheader"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="index.php">HOME</a> 
 
     </li> 
 

 
    </ul> 
 

 
    <div class="dropdown"> 
 
     <button class="dropbtn">OVER MIJ</button> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 

 

 

 
    </nav> 
 
</header> 
 

 
<div class="page-content"> 
 

 
    <p>TEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT 
 
    TEST TEXTTEST TEXTTEST TEXTTEST TEXT 
 
    </p> 
 

 

 
</div>

Answer 1

あなたは、あなたがそれを必要としない場合は、.page-content

にpadding-topを設定する必要がposition:fixedheaderで使用しているので、 fixedそのプロパティを削除してください。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 
header { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #5d585d; 
 
} 
 
nav ul { 
 
    float: right; 
 
    margin-top: 20px; 
 
    margin-right: 150px; 
 
    height: 25px; 
 
} 
 
nav ul li { 
 
    list-style: none; 
 
    float: left; 
 
    margin-right: 20px; 
 
} 
 
nav ul li a { 
 
    text-decoration: none 
 
} 
 
.page-content { 
 
    background-color: rgba(255, 255, 255, 0.23); 
 
    margin: 0 auto; 
 
    padding-top: 65px; /* new */ 
 
    width: 50%; 
 
    display: table; 
 
    border: 1px solid red; 
 
    color: white; 
 
} 
 
.page-content p { 
 
    margin: 0 auto; 
 
    margin-top: 60px; 
 
    display: table; 
 
    border: 1px solid red; 
 
} 
 
.dropdownmenu { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropbtn { 
 
    background-color: #b4efed; 
 
    color: #2a6d85; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #cbfffd; 
 
}

<header class="navbarheader"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="index.php">HOME</a> 
 
     </li> 
 
    </ul> 
 
    <div class="dropdown"> 
 
     <button class="dropbtn">OVER MIJ</button> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</header> 
 
<div class="page-content"> 
 
    <p>TEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT 
 
    TEST TEXTTEST TEXTTEST TEXTTEST TEXT 
 
    </p> 
 
</div>