我试图在相对容器内创建固定位置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;
- }
解决方法
截图：
这是如何位置：固定;表现：
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.
因此,要得到你想要的东西,你必须使用比固定定位更多的东西：
可能这个：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;
- }
