3

私は常にマージンを使用して、フローティング div を親 div の正しい位置に移動してきました (ヘッダー div 内のロゴ div など)。これは常に機能しますが、要素の個々の高さをいじる必要があり、それ以外の場合はレイアウトの残りの部分に影響を与えます。

今日、別の方法を見つけました。それは、ロゴの div 位置を相対にすることです。次に、例の top: 20px; を使用します。要素を移動しますが、これはレイアウトに影響を与えないようです。

他の影響がある可能性があることを知らずにこれに適応したくないので、上記の方法のいずれかに共通の欠陥を指摘したり、より良い解決策を提案したりできますか?

  // Sample HTML
  <div id='header'>
        <div id='logo'>
              LOGO GOES HERE
        </div>      
  </div>

  // Sample CSS
  #header {
        height: 100px;
  }

  // Version 1
  #logo {
        float: left;
        margin-top: 20px;
  }

  // Version 2
  #logo {
        float: left;
        position: relative;
        top: 20px;
  }
4

2 に答える 2

2

Mozilla 開発者 より:

relative 要素が配置されていないかのようにすべての要素をレイアウトし、レイアウトを変更せずに要素の位置を調整します (したがって、要素が配置されていなければ配置されていたはずの場所にギャップが残ります)。table-*-group、table-row、table-column、table-cell、および table-caption 要素に対する position:relative の効果は定義されていません。

これがあなたの質問に答えることを願っています。

使用するのが正しい場合もあれば、そうでない場合もあります。レイアウトにもよりますが、レスポンシブデザインにしたい場合は、そこにマージンを持たせたほうがいいかもしれません。

あなたの場合、ヘッダーの高さが固定されているので、相対を使用できます。マージンを使用するのがより一般的な方法だと思います。私はposition: fixed、モバイル デバイスに関する問題のみを認識しています。

CSS とポジショニングの詳細については、こちらをご覧ください。

于 2012-10-09T13:03:39.067 に答える
1

上または下または右または左を使用する場合、位置絶対および固定では、フロートを使用してはならず、その親にこのスタイルを使用する必要があります

postion:relative;

よろしくお願いします

于 2012-10-09T13:11:50.653 に答える