CSS 相对于父元素的固定位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18154922/
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 relative to parent element
提问by sh3nan1gans
I am relatively new to CSS. I have run into a problem where I am trying to fix an element next to its parent element. I am able to do so with the following code:
我对 CSS 比较陌生。我遇到了一个问题，我试图修复其父元素旁边的元素。我可以使用以下代码执行此操作：
Parent element:
父元素：
#search_results{
position:relative;
}
Child element:
子元素：
.total {
position: fixed;
top:10px;
width:250px;
left: 75%;
/*overflow: hidden;*/
margin-left: -125px;
}
This works fine until the browser window is resized. When that occurs, the fixed element overlaps its parent element. You can see my problem here: Twittiment
在调整浏览器窗口大小之前，这可以正常工作。发生这种情况时，固定元素与其父元素重叠。你可以在这里看到我的问题： Twittiment
I am trying to fix the child element to the top of the page and the right-hand side of the parent element. Any ideas?
我试图将子元素固定到页面顶部和父元素的右侧。有任何想法吗？
回答by Mr. Alien
Edit:
编辑：
You can use position: sticky;which can be relative to the parent element.
您可以使用position: sticky;which 可以相对于父元素。
body > div {
height: 300px;
background-color: #ddd;
overflow: auto;
margin-top: 70px;
}
div > div {
height: 1000px;
position: relative;
}
span {
display: block;
height: 20px;
background-color: tomato;
position: sticky;
top: 0;
}<div>
<div>
<span>This is a relatively sticky header</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus voluptas pariatur ullam, dolores veritatis vero possimus nisi corrupti, provident aspernatur harum ab aliquam expedita assumenda, blanditiis aliquid id consequuntur distinctio.</p>
</div>
</div>Old Answer:
旧答案：
As per CSS Spec, the element positioned fixedis fixed to the viewport and not the containing element.
根据 CSS 规范，定位的元素fixed固定到视口而不是包含元素。
So the short answer is NO, you cannot have a fixedpositionelement relative to it's parent element. You can use position: absolute;instead and tweak the topleftrightbottomparameters on the run using jQuery/JS.
所以简短的回答是NO，你不能有一个fixedposition相对于它的父元素的元素。您可以position: absolute;改用并topleftrightbottom使用 jQuery/JS 在运行时调整参数。
回答by LaurieSpiegel
Of course you can, just need an extra div!
当然可以，只需要一个额外的div！
<div class="fixed-wrapper">
<div class="close-wrapper">
<div class="close"></div>
</div>
</div>
body
background: gray
height: 8000px
.fixed-wrapper
position: fixed
top: 20px
left: 0
right: 0
.close-wrapper
max-width: 1200px
position: relative
.close
background: #fff
width: 30px
height: 30px
position: absolute
right: 0
border: 1px solid #515151
&:before,&:after
width: 25px
height: 1px
background: #515151
content: ''
position: absolute
top: 50%
left: 50%
display: block
@include transform(translate(-50%, -50%) rotate(45deg))
&:after
transform: translate(-50%, -50%) rotate(-45deg)
See this fiddle I made for you :-)
看看我为你做的这个小提琴:-)
回答by Hussain Bootwala
The best way to achieve this is to give parent element a transform css. eg:
实现这一点的最佳方法是给父元素一个转换 css。例如：
.relative{
transform: translateX(0); // this will act like relative parent
}
.fixed{
position: fixed;
left:0;
top:0;
width:100%; // width will be relative to the width of .relative
}
回答by R Lacorne
What you want to use is position:absolute . This places the child element according to it's parent element.
您要使用的是 position:absolute 。这将根据其父元素放置子元素。
Some readings here : http://www.w3schools.com/cssref/pr_class_position.asp
这里的一些读物：http: //www.w3schools.com/cssref/pr_class_position.asp
