html - 固定位置を使用するときにコンテンツ/要素を下に移動する方法

okwaves2024-01-25 8

ナビゲーションバーに固定位置を使用している場合、コンテンツを下に移動するにはどうすればよいですか? Position:fixed を使用しているため、私のページは一番上に表示されます。 margin-bottom を使用することはできますが、ナビゲーションバーが正確に画面の上部にありません。 (はい、* 内に margin:0 と padding:0 があります)。

リンク: https://codepen.io/Altinzzz/pen/ZEWawxV

コード

html

<div class="topnav" id="myTopnav">
    <a href="websitecar.html"> Home</a>
    <a href="aboutus.html" class="active"> About Us</a>
    <a href="contactus.html">Contact</a>
    <a href="#about">About</a>
</div>

<div class = "introduction">
    <span class = "introductionText"> Welcome </span>
    <span class = "introductionText2"> About us </span>
</div>

CSS

*{
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
 }

.topnav {
   overflow: hidden;
   background-color: #312E2E;
   position: fixed;
   width: 100%;
   z-index: 2;
   float: left;
}

.topnav a {
   float: left;
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }

 .introduction{
    text-align:center;
    padding: 0;
 }

 .introduction span{
    display: block;
    animation-fill-mode: forwards;
 }

 .introductionText{
     font-size: 80px;
     background: white;
     color:black;
     letter-spacing: -50px;
     font-weight: 400;
     position: relative;
     animation: text 3s 1;

 }

 .introductionText2{
     font-size: 40px;
     background: white;
     font-weight: 400;
     margin-bottom: 50px;
 }

------------------------

position:fixed を使用すると、要素がフローから取り出されます。したがって、ページの残りの部分は、固定要素が存在していないかのように先頭から始まります。これは、マージンやその他の CSS を適用しても、他の CSS には影響しないことを意味します。彼女の要素。

代わりに、ページの残りの部分にスペースを追加する必要があります。次の要素の上部にパディングまたはマージンを追加します。例:

 .introduction{
    text-align:center;
    padding: 50px 0 0;
 }

メンテナンスを容易にするために、特に各ページの最初の要素が同じでない場合は、すべてのページに外部コンテナを追加してこのスペースを追加することをお勧めします。

.page-container{
    padding-top: 50px;
}

HTML は次のようになります:

<div class="topnav" id="myTopnav"> ... </div>

<div class="page-container">
     ... whatever elements you have...
</div>

レスポンシブデザインに関する考慮事項: ナビゲーションがラップする場合、固定パディングでは十分ではないことに注意してください。この場合、メディアクエリを確認するか、ハンバーガーメニューを使用してナビゲーションバーを同じ高さに保つ必要がある場合があります。この問題を克服してください。

実際の例:

* {
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

.topnav {
  overflow: hidden;
  background-color: #312E2E;
  position: fixed;
  width: 100%;
  z-index: 2;
  float: left;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.page-container {
  padding-top: 50px;
}

.introduction {
  text-align: center;
  padding: 0;
}

.introduction span {
  display: block;
  animation-fill-mode: forwards;
}

.introductionText {
  font-size: 80px;
  background: white;
  color: black;
  letter-spacing: -50px;
  font-weight: 400;
  position: relative;
  animation: text 3s 1;
}

.introductionText2 {
  font-size: 40px;
  background: white;
  font-weight: 400;
  margin-bottom: 50px;
}

.contentforscroll {
  background: lightblue;
  height: 800px;
}

<div class="topnav" id="myTopnav">
  <a href="https://stackoverflow.com/questions/63747858/websitecar.html"> Home</a>
  <a href="https://stackoverflow.com/questions/63747858/aboutus.html" class="active"> About Us</a>
  <a href="https://stackoverflow.com/questions/63747858/contactus.html">Contact</a>
  <a href="">About</a>
</div>

<div class="page-container">
  <div class="introduction">
    <span class="introductionText"> Welcome </span>
    <span class="introductionText2"> About us </span>
  </div>
  <div class="contentforscroll">
    <p>More content to make the page scroll so you see the fixed element</p>
  </div>
</div>

padding: 50px 0 0 ではなく、padding: 48px 0 0 である必要があります ....私の前に答えが出ました...笑

– ダン・マリン

2020 年 9 月 4 日 21:10

@DanMullin、コメントありがとうございます。ナビゲーションの高さが固定されておらず、フォントサイズに基づいている場合は、通常、ブラウザー間のバリエーションとして 1 ～ 2 ピクセルの追加を許可します。特にユーザーが Windows の表示スケールを 100% 以外に設定している場合、ブラウザーは位置を再計算する必要があり、その位置は次から次へと異なる可能性があります :) もちろん、2 つの div がスペースなしで一致する必要がある場合は、高さを固定した方が良いでしょう (残念ながら!)

– ふわふわ子猫

2020 年 9 月 4 日 21:21

------------------------

紹介文にpadding-topを追加

------------------------

身頃の上にパッドを付けてください（bトップナビゲーションの高さより大きい）また、topnav は先頭に固定される必要があるため、top: 0 を追加する必要があります。

以下をご確認ください。

*{
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
}

body {
  padding-top: 50px;
}

.topnav {
    overflow: hidden;
    background-color: #312E2E;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    float: left;
}

.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: black;
    color: white;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}
  
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}
  
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

.introduction{
    text-align:center;
    padding: 0;
}

.introduction span{
    display: block;
    animation-fill-mode: forwards;
}

.introductionText{
    font-size: 80px;
    background: white;
    color:black;
    letter-spacing: -50px;
    font-weight: 400;
    position: relative;
    animation: text 3s 1;

}

.introductionText2{
    font-size: 40px;
    background: white;
    font-weight: 400;
    margin-bottom: 50px;
}


@keyframes text {
    0%{
        color: black;
        margin-bottom: -80px;
        letter-spacing: -10px;
    }
    25%{
        margin-bottom: -80px;
        letter-spacing: 25px;
    }
    80%{
        letter-spacing: 0px;
    }
    100%{
        letter-spacing: 0;
        margin-bottom: -3px;
    }
}

<div class="topnav" id="myTopnav">
        <a href="https://stackoverflow.com/questions/63747858/websitecar.html"> Home</a>
        <a href="https://stackoverflow.com/questions/63747858/aboutus.html" class="active"> About Us</a>
        <a href="https://stackoverflow.com/questions/63747858/contactus.html">Contact</a>
        <a href="">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
    </div>
    
    <div class = "introduction">
        <span class = "introductionText"> Welcome </span>
        <span class = "introductionText2"> About us </span>
    </div>

------------------------

皆さん、推薦してくれてありがとう。 3 つすべてが正しいです。

padding-top の追加: 50px; .introduction は機能し、padding-top: 50px; を追加することも機能しました。 body に「top: 0;」を挿入し、topnav 内に追加します。

html - 固定位置を使用するときにコンテンツ/要素を下に移動する方法

総合生活情報サイト - OKWAVES

カテゴリ一覧