css - div コンテナ内の固定位置 div

Question

相対コンテナー内に固定位置の div を作成しようとしています。ブートストラップ CSS フレームワークを使用しています。固定位置のカートを作成しようとしています。したがって、ユーザーがページをスクロールするたびに、カートの内容が表示されます。しかし、今の問題は、そのコンテナ div の外で実行されたことです。

これは、レスポンシブ モードで動作する必要があります。

ここで私の試み：

<div class="wrapper">
    <div class="container">
        <div class="element">
            fixed
        </div>
    </div>
</div>

CSS コード:

.wrapper {
    width:100%
}
.container {
    width:300px;
    margin:0 auto;
    height:500px;
    background:#ccc;
}
.element {
    background:#f2f2f2;
    position:fixed;
    width:50px;
    height:70px;
    top:50px;
    right:0px;
    border:1px solid #d6d6d6;
}

ここで実際の例を参照してください。

Answer 1

スクリーンショット:

は次のようposition: fixed;に動作します。

MDN リンク

要素のためのスペースを残さないでください。代わりに、画面のビューポートに対して指定された位置に配置し、スクロールしても移動しません。印刷するときは、すべてのページの固定位置に配置します。

したがって、必要なものを取得するには、固定位置以上のものを使用する必要があります。

おそらくこれ：デモ

.wrapper {
    width:100%
}
.container {
    width:300px;
    margin:0 auto;
    height:500px;
    background:#ccc;
}
.element {
    background:#f2f2f2;
    position:fixed;
    width:50px;
    height:70px;
    margin-left:250px;
    border:0px solid #d6d6d6;
}

Answer 2

私はそれに対する答えを見つけました：

 <div class="container">
        <div class="inContainer">
            <p> coucou </p>
        </div>

        <div>
            <p> other thing</p>
        </div>
 </div>

class=inContainer が class=Container の固定位置にあることを望みますが、ナビゲーターのスクロールでスクロールする場合、class=inContainer が class=container の外に移動することは望ましくありません

それでこんなものが作れます

.container{
    height: 500px;
    width: 500px;
    overflow-y:scroll;
}

.inContainer {
    position: absolute; 
}

したがって、class=inContainer は常にあなたが class=Container の一番上にあり、ナビゲーターでスクロールすると、あなたが class=container と一緒に移動します =)

(クロムでのみテスト済み)

Answer 3

ポジショニングの動作は AdityaSaxena の回答https://stackoverflow.com/a/18285591/5746301に記載されています

固定位置のカートを作成するには、jquery を使用することもできます。

Leftまたはright値またはmarginを適用すると、応答中に問題が発生する可能性があります。

以下のスニペットでは、コンテナの右側に固定要素を配置しています。

コンテナーの幅が増加しても、それに応じて固定要素が配置されます。

jsfiddle デモ URLは次のとおりです。

//Jquery

$(document).ready(function(){
var containerWidth = $(".container").outerWidth();
var elementWidth = $(".element").outerWidth();
var containerOffsetLeft = $(".container").offset().left;
var containerOffsetRight = containerOffsetLeft + containerWidth - elementWidth;
	$(".element").css("left", containerOffsetRight);
});

//CSS

.wrapper {
    width:100%
}
.container {
    width:300px;
    margin:0 auto;
    height:900px;
    background:#ccc;
}
.element {
    background:#f2f2f2;
    position:fixed;
    width:50px;
    height:70px;
    top:50px;
    border:1px solid #d6d6d6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="wrapper">
    <div class="container">
        <div class="element">
            fixed
        </div>
    </div>
</div>

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

ありがとう

Answer 4

<div style="position: fixed;bottom: 0;width: 100%;">
  <div class="container" style="position: relative;">
    <div style="position: absolute;right: 40px;bottom: 40px;background:#6cb975;border-radius: 50%;width: 40px;text-align: center;height: 50px;color: #fff;line-height: 50px;">
      F
    </div>
  </div>
</div>

Answer 5

追加するだけです

.element {
    left:368px;
}

フィドル: http://jsfiddle.net/UUgG4/