web-dev-qa-db-ja.com

position：left / top / right / bottomが指定されていない場合に修正されました-FF / IEで望ましい結果が得られますが、Safariでは得られません

さらに別のposition:fixed関連の質問をしなければならないのは残念ですが、他のさまざまな質問やフォーラムのスレッドを読んでも、これについては役に立ちませんでした。

次のコードは、これまでプロジェクトでposition:fixedをどのように使用してきたかを簡単に示したものです。 position:fixedの私の最初の（誤）理解は、最初に配置された親コンテナに対して最初に固定され、その後、ビューポートのスクロール位置に関係なくその位置に留まるというものです。私は今、それが間違っていることに気づきました。実際、最も外側のコンテナ（つまり、htmlタグ）に対するposition:fixedの位置と、他の位置を持つ最初の親コンテナに対するposition:absoluteの位置staticより。

SOに関する他のさまざまな質問を読んで、position:fixedを使用して達成しようとしていた効果は、他の多くの人々が試みたものであることに気付きましたが、CSSだけでは実現できません。コンテナを基準にした要素ですが、ページをスクロールしたときにビューポートを基準にした場所にとどまります。

しかし、私を混乱させているのは、上記がまさに私が達成したように見えたものであるということです-少なくともFFとIE8では。以下のコード例では、「固定右ペインコンテンツ」は、最初は赤い「中央スクロール可能コンテンツ」ボックスの右側に配置され、中央コンテンツの上部と垂直方向に同じ高さになります。中央のコンテンツはスクロールできますが、右側のコンテンツは、最初は通常のドキュメントフローで静的に配置され、その後はビューポートに固定されたままであるかのように、元の位置に留まります。

top/bottom/left/right属性を指定していないという理由だけで、これがIE8とFFで「機能する」ように見えることに気付きました。 fixed要素。そうすると、fixed要素がビューポートに対してすぐに配置されることに気付きます。

これまで、相対位置が指定されていない場合、position:fixedはデフォルトで、通常は静的に配置される場所にその要素を配置すると想定していました。少なくともFFとIE8はまさにそれをしているようです。

ただし、Safariでテストすると、Safariはそのfixed要素をコンテナの左側に配置しているように見えます。つまり、配置しないと、私のposition:fixed要素は静的に配置されたときの場所にも、ビューポートに対して0,0の位置にもなりません。

私はこれまで非常に不十分に定義された動作に依存してきましたが、結局、この固定された位置付けを実現するためにJavaScriptソリューションに頼るのが最善ですか？または、この動作はIE/FF;に対して明確に定義されていますか？誰かがSafariの配置の背後にあるロジックを説明できますか？

<style type="text/css">
  #content-centre {
    margin: 0 auto;
    width: 900px;
  }
  
  #header {
    height: 55px;
    position: fixed;
    top: 0;
    width: 990px;
  }
  
  #left-pane {
    position: fixed;
    top: 12px;
    border: 1px green solid;
  }
  
  #main-pane {
    left: 200px;
    position: relative;
    top: 66px;
    width: 760px;
    border: 1px yellow solid;
  }
  
  #container-1 {
    border-top: 1px solid #FFFFFF;
    float: right;
    min-width: 130px;
    padding-left: 20px;
    border: 1px blue solid;
  }
  
  #container-0 {
    margin-right: 20px;
    min-height: 470px;
    overflow: auto;
    padding: 10px 0;
    position: relative;
    border: 1px red solid;
  }
  
  .side-info-list-fixer {
    position: fixed;
  }
</style>

<div id="content-centre">

  <div id="header">
  </div>

  <div id="left-pane">
    Fixed left pane content
  </div>


  <div id="main-pane">
    <div id="page-module-containers">

      <div id="container-1">
        <div class="side-info-list-fixer"> Fixed right pane content </div>
      </div>

      <div id="container-0">
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
      </div>

    </div>
  </div>

</div>
csscss-position
26
Trevor

あなたが探している答えは次のとおりだと思います...

要素の位置はデフォルトでは0,0になりません。その位置は、含まれている要素に対してデフォルトで設定されているため、この例では、「＃container-1」にはpadding-left：20pxがあり、残りのパディングは0に設定されているため、要素の「デフォルト」の位置は20pxになります。 ＃container-1の壁の左側で、上部は＃container-1の上部から0pxです。

この要素のデフォルトのデフォルト位置とスクロールされないビューポートは上から63pxであり、左は明らかにブラウザの幅に依存します。ただし、topとleftをオーバーライドしない場合、それらはレンダリングエンジンによってtop：63px、left：893pxとしてすでに定義されています。

次に、ウィンドウのサイズ変更時に、その位置がビューポートに基づいて位置を反映するように調整されるため、下にスクロールすると、位置が変更されて固定されます。

したがって、「position：fixed;」を追加するだけです。プロパティは（ブラウザに関する限り）次のようになります。

position:fixed;
top:63px; // defined by default during browser rendering in some browsers (based on scroll position on load)
left:893px; // defined by default during browser rendering in some browsers (based on scroll position / width of browser at time of load)

また、IE6などはposition：fixedを一切サポートしていません。 http://fiddle.jshell.net/uaE4g/4/show/

これがお役に立てば幸いです。

17
Joshua F. Rountree

同じ要件があり、ビューポートに対して要素fixedを自然な（デフォルトの）static位置に配置しました。この単純なjQuery関数を使用することになりました。

function SetFixedPositioning(element) {
    var currentOffset = $(element).offset();
    $(element).css("position", "fixed");
    $(element).offset(currentOffset);           
}

次のように使用します。

SetFixedPosition($("#element-to-position"));

私のユースケースは、ドキュメントに流れ込んだ後、その位置で修正された第2レベルのナビゲーションメニューでした。

0
khargoosh

サファリ6ではなくサファリ5でも同様の結果が見られます。

ブラウザ間で、次のように機能するようです。

位置のプロパティの1つが固定要素で定義されていない場合、そのプロパティの初期値は、オブジェクトが静的である場合と同じです。そうみたいです。

ページの読み込み後も、静的であるかのように動作し続けます。したがって、要素を垂直方向に固定し、水平方向には固定しない場合、上下にスクロールでき、要素は固定されたままですが、横方向にスクロールすると、要素はページに沿ってスクロールします。

しかし、サファリ5では、要素が配置されたコンテナ内にある場合、説明どおりに動作するように見えます。初期値は静的である場合と同じですが、その後はその位置に固定されたままになります。

'side-info-list-fixer'は 'main-pane'内にあり、position：relativeがあります。それを外すと、safari6や他のほとんどのブラウザと同じ動作が見られる場合があります。

私は何が正しいのかわからない、そしてあなたがこれらの機能に依存すべきかどうか...

$ 2c、*-パイク

0
commonpike