固定位置div在div容器内 [英] fixed position div inside div container

问题描述

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

这篇关于固定位置div在div容器内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！