CSS div 容器内的固定位置 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18285473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fixed position div inside div container
提问by Swapnil Bhavsar
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.
我正在尝试在相对容器内创建固定位置 div。我正在使用引导 css 框架。我正在尝试创建一个固定位置的购物车。因此，每当用户滚动页面时，它都会显示购物车内容。但现在的问题是，它运行在容器 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:
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;
}
回答by AdityaSaxena
Screenshot:
截屏：
This is how position: fixed;behaves:
这是position: fixed;行为方式：
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;
}
回答by Lucsartes
I found the answer to that :
我找到了答案：
<div class="container">
<div class="inContainer">
<p> coucou </p>
</div>
<div>
<p> other thing</p>
</div>
</div>
You want that class=inContainer are in class=Container in fixed position but if you scroll with the navigator scroll you don't want that the class=inContainer move outside the class=container
您希望 class=inContainer 在固定位置的 class=Container 中，但是如果您使用导航器滚动滚动，您不希望 class=inContainer 移动到 class=container 之外
So you can make something like that
所以你可以做这样的事情
.container{
height: 500px;
width: 500px;
overflow-y:scroll;
}
.inContainer {
position: absolute;
}
So class=inContainer will be always on the top of you're class=Container and move with you're class=container if you scroll with navigator scroll =)
所以 class=inContainer 将始终在你的顶部 class=Container 并随着你的 class=container 移动，如果你用导航器滚动 =)
(tested only with chrome)
（仅用 chrome 测试）
回答by Bence
Yes, you can do it, just use margin-topproperty instead of topproperty.
是的，您可以做到，只需使用margin-top财产而不是top财产。
When you use position: fixed and specify a top and or left position, you'll find that the element will be fixed relative to the window, and not to any other element of position: relative.
There is a way around this and that is not to specify top and left positions but instead to use margin-left and margin-top on the position: fixed element.
当您使用 position:fixed 并指定顶部和/或左侧位置时，您会发现该元素将相对于窗口固定，而不是相对于 position:relative 的任何其他元素。
有一种方法可以解决这个问题，即不指定顶部和左侧位置，而是在 position: fixed 元素上使用 margin-left 和 margin-top 。
来源：https: //www.gravitywell.co.uk/latest/design/posts/css-tip-fixed-positioning-inside-a-relative-container/
回答by Nate Beers
Make the element's parent container have position: relative
使元素的父容器具有 position: relative
Instead of using topor leftuse margin-topand/or margin-left
而不是使用top或left使用margin-top和/或margin-left
If you only use topthat will position the element based on the window, but if you use margin-topthat will position based on the parent element. Same goes for leftor right
如果你只使用top它会基于窗口定位元素，但如果你使用margin-top它会基于父元素定位。同样适用于left或right
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
}
.child {
position: fixed;
margin-top: 30px;
margin-left: 30px;
}
回答by Satheesh Kumar
The behavior of the positioning is mentioned in the AdityaSaxena's answer https://stackoverflow.com/a/18285591/5746301
AdityaSaxena 的回答中提到了定位的行为https://stackoverflow.com/a/18285591/5746301
For creating a fixed position cart, you can also do it with using the jquery.
要创建固定位置的购物车，您也可以使用 jquery 来完成。
If we apply the Leftor rightvalue or margin, we may face some issue while responsive.
如果我们应用Left或right值或margin，我们可能会在响应时遇到一些问题。
In the below snippet, I have placed the fixedelement at the right of the container.
在下面的代码片段中，我将固定元素放置在容器的右侧。
Even if the width of the container increased the fixed element placed accordingly.
即使容器的宽度增加，固定元素也会相应放置。
Here is the jsfiddle Demo 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>Hope this may help you.
希望这可以帮助你。
Thanks
谢谢
回答by Aysennoussi
No it's impossible because fixed property throws the element out of the flow so it doesn't depend to anything on the document and yes it is no more contained in your container : )
不，这是不可能的，因为固定属性将元素从流中抛出，因此它不依赖于文档上的任何内容，是的，它不再包含在您的容器中:)
回答by noob
If you are looking to show the cart even when the user scrolls that is fixed then you should use position:fixedfor the cart (if .containeris your cart), because it should be shown with respect to screen/viewport. Your current code will only show the elementwhich is positioned absolutely inside the container. If you want it to be like that then give :
如果您希望即使在用户滚动固定的情况下也显示购物车，那么您应该使用position:fixed购物车（如果.container是您的购物车），因为它应该相对于屏幕/视口显示。您当前的代码只会显示element绝对位于container. 如果你希望它像那样，那么给：
.container {
position:relative;
}
.element {
position:absolute;
top:50px;
right:0px;
}
回答by Pradeep
<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>
