web-dev-qa-db-ja.com

要素を親に対して相対的に固定できますか。

要素を固定して配置しても、親が相対的に配置されているかどうかに関係なく、ウィンドウに対して相対的に固定されます。

CSS

#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; }
#feedback { position: fixed; right: 0; top: 120px; }

HTML

<div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

http://jsbin.com/ibesa3

cssdom
215
Jiew Meng

両方の可能な質問に対する答えを提供しましょう。あなたの既存のタイトル（そしてオリジナルの投稿）はあなたが編集とその後のコメントであなたが求めるものとは異なる質問をすることに注意してください。

親要素に対して要素を「固定」配置するには、子要素にposition:absoluteを使用し、デフォルトまたは静的以外の位置モードが必要です。あなたの親要素.

例えば：

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

これは、parentDivの位置に対してchildDiv要素を左に50ピクセル、下に20ピクセル配置します。

要素をウィンドウに対して「固定」で配置するには、position:fixedが必要です。また、top:、left:、right:、およびbottom:を使用して表示することもできますフィット。

例えば：

#yourDiv { position:fixed; bottom:40px; right:40px; }

これは、Webブラウザのウィンドウに対してyourDivを固定し、下端から40ピクセル、右端から40ピクセルに配置します。

124
DuckMaestro

CSSの仕様では、position:fixedを、それを含む位置要素ではなく、ビューポートに固定する必要があります。

親を基準にして座標を指定する必要がある場合は、最初にJavaScriptを使用してビューポートを基準とした親の位置を検索し、次にそれに応じて子（固定）要素の位置を設定する必要があります。

ALTERNATIVE：いくつかのブラウザはsticky CSSサポートを持っています。これは要素がそのコンテナとビューポートの両方の中に配置されることを制限します。コミットメッセージごとに：

sticky ...は、コンテナボックスとビューポートの交差部分の内側に配置されるように要素を制約します。

固定的に配置された要素はposition：relative（インフローのために確保されたスペース）のように動作しますが、固定位置によって決定されるオフセットを持ちます。相対および固定をカバーするようにisInFlowPositioned（）を変更しました。

設計目標によっては、この動作が役立つ場合があります。これは現在作業中のドラフトであり、テーブル要素を除けば適切なサポートを受けています。 position: stickyはSafariでもまだ-webkit接頭辞を必要とします。

ブラウザサポートに関する最新の統計情報については、 caniuse を参照してください。

189
Jon Adams

最初にposition: fixedとleft: 50%を設定し、次に2番目になります。これで開始点が中心になり、余白を入れて新しい位置を設定できます。

60
Даниил Пронин

2016年更新

現在のブラウザでは、コンテナに対して固定された要素を配置することが可能になりました。 transformプロパティを持つ要素は、固定位置の子要素のいずれかに対するビューポートとして機能します。

あるいは、 CSS変換モジュール が示すように、

レイアウトがCSSボックスモデルによって管理される要素の場合、transformプロパティにnone以外の値を指定すると、その要素はすべての子孫に対して包含ブロックを確立します。そのパディングボックスは、すべての絶対位置の子孫、固定位置の子孫、および子孫の固定背景の添付ファイルのレイアウトに使用されます。

.context {
  width: 300px;
  height: 250px;
  margin: 100px;
  transform: translateZ(0);
}
.viewport {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  overflow: scroll;
}
.centered {
  position: fixed;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
}
<div class="context">
  <div class="viewport">
    <div class="canvas">

      <table>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
      </table>

      <button class="centered">OK</button>

    </div>
  </div>
</div>
40
Patrick McElhaney

私はこれが非常に古いことを知っていますが、探していた（純粋なCSS）答えを見つけられなかった後、私はこの解決策を考え出しました（一部は medium.com から抽象化されています）同じこと。

@DuckMaestroの回答を組み合わせると、親（実際には祖父母）に対して要素を固定して配置できます。 position: absolute;を使用して、position: relative;で親内に要素を配置し、次に絶対配置要素内の要素にposition: fixed;を配置します。

HTML

<div class="relative">
  <div class="absolute">
    <a class="fixed-feedback">This element will be fixed</a>
  </div>
</div>

CSS

.relative {
  margin: 0 auto;
  position: relative;
  width: 300px;
}

.absolute {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.fixed-feedback {
  position: fixed;
  top: 120px;
  width: 50px;
}

例

@JonAdamsが言ったように、position: fixedの定義では、ビューポートに対して要素を配置する必要がありますが、このソリューションを使用すると、要素の水平方向の側面を回避できます。

注：これは、固定要素にrightまたはleft値を設定することとは異なります。これは、ウィンドウのサイズが変更されると、水平方向に移動するためです。

11
Lifehack

これはjQueryを使ってページ要素の右側にdiv（ツールバー）を修正するための上記のJon Adamsの提案の例です。アイデアは、ビューポートの右側からページ要素の右側までの距離を見つけ、そこにツールバーの右側を表示することです。

HTML

<div id="pageElement"></div>
<div id="toolbar"></div>

CSS

#toolbar {
    position: fixed;
}
....

jQuery

function placeOnRightHandEdgeOfElement(toolbar, pageElement) {
    $(toolbar).css("right", $(window).scrollLeft() + $(window).width()
    - $(pageElement).offset().left
    - parseInt($(pageElement).css("borderLeftWidth"),10)
    - $(pageElement).width() + "px");
}
$(document).ready(function() {
    $(window).resize(function() {
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $(window).scroll(function () { 
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $("#toolbar").resize();
});
9
KXL

この解決策は私のために働きます！元の詳細な回答への参照： https://stackoverflow.com/a/11833892/5385623

css：

.level1 {
    position: relative;
}


.level2 {
    position: absolute;
}


.level3 {
    position: fixed;
    /* Do not set top / left! */
}

html：

<div class='level1'>
    <div class='level2'>
        <div class='level3'>
            Content
        </div>
    </div>
</div>
2
Ed Kolosovsky

私はこれがより古い投稿であることを知っています、しかし私はJiew Mengがしようとしていたことの良い例はすでにこのサイトで見つけられることができると思います。ここにあるサイドメニューをチェックしてください。 https://stackoverflow.com/faq#questions 。深く入り込まずに見てみると、スクロールがアンカータグの下に当たるとjavascriptが固定位置をアタッチし、スクロールが同じアンカータグを超えると固定位置を削除するように指示できます。うまくいけば、それは誰かが正しい方向に始められるようになるでしょう。

2
illinoistim

これは古い投稿ですが、万が一必要になったときのために私はここに私のJavaScriptソリューションを残します。

// you only need this function
function sticky( _el ){
  _el.parentElement.addEventListener("scroll", function(){
    _el.style.transform = "translateY("+this.scrollTop+"px)";
  });
}


// how to make it work:
// get the element you want to be sticky
var el = document.querySelector("#blbl > div");
// give the element as argument, done.
sticky(el);
#blbl{
  position:relative;
  height:200px;  
  overflow: auto;
  background: #eee;
}

#blbl > div{
  position:absolute; 
  padding:50px; 
  top:10px; 
  left:10px; 
  background: #f00
}
<div id="blbl" >
    <div><!-- sticky div --></div> 

    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

注

  1. 私は変換を使用しました：translateY（@px）それはそれが計算するために軽量であるべきであるので、 高性能アニメーション

  2. 私は最近のブラウザでこの機能を試しただけで、ベンダが必要とされる古いブラウザ（そしてもちろんIE）では機能しません。

2
Sabaz

複数のdivを使用して、固定yと絶対xのdivを取得できました。私の場合は、中央と横1180ピクセルのdivに合わせて、左右にdivが必要でした。

    <div class="parentdiv" style="
        background: transparent;
        margin: auto;
        width: 100%;
        max-width: 1220px;
        height: 10px;
        text-align: center;">
        <div style="
            position: fixed;
            width: 100%;
            max-width: 1220px;">
            <div style="
                position: absolute;
                background: black;
                height: 20px;
                width: 20px;
                left: 0;">
            </div>
            <div style="
                width: 20px;
                height: 20px;
                background: blue;
                position: absolute;                                           
                right: 0;">
            </div>
        </div>
    </div>
1
sajtdavid