相对于父元素的固定位置[重复]
Posted
技术标签:
【中文标题】相对于父元素的固定位置[重复]【英文标题】：Fixed position relative to parent element [duplicate] 【发布时间】：2013-08-11 20:55:10 【问题描述】：我对 CSS 比较陌生。我遇到了一个问题，我试图修复其父元素旁边的元素。我可以使用以下代码来做到这一点：
父元素：
#search_results
position:relative;
子元素：
.total
position: fixed;
top:10px;
width:250px;
left: 75%;
/*overflow: hidden;*/
margin-left: -125px;
在调整浏览器窗口大小之前，这可以正常工作。发生这种情况时，固定元素会与其父元素重叠。你可以在这里看到我的问题： Twittiment
我正在尝试将子元素固定在页面顶部和父元素的右侧。有什么想法吗？
【问题讨论】：
你不能用position: sticky吗？
position: sticky IE 不支持：caniuse.com/#feat=css-sticky
【参考方案1】：
编辑：
您可以使用position: sticky;，它可以相对于父元素。
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>旧答案：
根据 CSS 规范，位于 fixed 的元素固定在视口上，而不是包含元素。
所以简短的回答是NO，你不能有一个相对于它的父元素的fixed position 元素。您可以改用position: absolute; 并在运行时使用jQuery/JS 调整top left right bottom 参数。
【讨论】：
过期...？ 额外的 div 是可能的。请检查@LaurieSpiegel 的答案【参考方案2】：当然可以，只需要一个额外的 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)
看看我为你做的这个小提琴:-)
http://codepen.io/marinagallardo/pen/mJyqaN
【讨论】：
有效！比公认的“不可能”更好的答案 最佳答案。谢谢！ 这将是一个更好的答案，并解释它为什么起作用。【参考方案3】：实现这一点的最好方法是给父元素一个转换 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
【讨论】：
浏览器兼容性？ 这就像position: absolute:。假设你有一个滚动条，那么固定元素就会随之而来。
好伙伴！！！【参考方案4】：
您要使用的是 position:absolute 。这将根据其父元素放置子元素。
这里的一些读数：http://www.w3schools.com/cs-s-ref/pr_class_position.asp
【讨论】：
不，它没有...它根据其父元素放置子元素 IF 它的父元素具有position: relative; 或@987654324 @ 放。否则，它仅与 <html> 元素本身相关（即屏幕的最左上角）。参考：css-tricks.com/…
其实，让我纠正一下自己：它根据最近的祖先元素放置子元素position: fixed;或position: absolute;，如果没有，它与<html>有关元素本身。以上是关于相对于父元素的固定位置[重复]的主要内容，如果未能解决你的问题，请参考以下文章