固定位置div在div容器内

本文介绍了固定位置div在div容器内的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图在相对容器内创建固定位置div。我使用bootstrap 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; }

不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不移动。打印时，将它放在每一页的固定位置。

因此，使用超过固定位置的东西：

这可能是： 演示

.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; }

I am trying to create fixed position div inside relative container. I am using bootstrap css framework. I am trying to create a fixed position cart. So whenever user scroll page it will show cart contents. but now problem is, it ran outside that container div.

This has to work in responsive mode.

Here my try:

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

CSS Code:

.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; }

See live example here.

解决方案

Screenshot:

This is how position: fixed; behaves:

MDN link

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Hence, to get what you want you have to use something more than fixed positioning:

Probably this: demo

.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; }