我对CSS相对较新。我遇到了一个问题，我想将一个元素固定在其父元素旁边。我可以使用以下代码实现：
父元素：
#search_results{
position:relative;
}
子元素：
.total {
position: fixed;
top:10px;
width:250px;
left: 75%;
/*overflow: hidden;*/
margin-left: -125px;
}
这在浏览器窗口大小不变时运作良好。当发生调整大小时，固定元素会重叠其父元素。您可以在此处看到我的问题： Twittiment
我试图将子元素固定在页面顶部和父元素的右侧。有什么想法吗？
编辑:
你可以使用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的元素是相对于视口而不是包含它的元素进行固定定位。
因此，简短的答案是不行，你不能让fixed的position元素相对于其父元素进行定位。您可以使用position: absolute;，然后使用jQuery / JS在运行时微调top，left ，right，bottom参数。
当然可以，只需要一个额外的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)
看看我为你准备的这个代码片段 :-)
实现这一点的最佳方法是给父元素添加变换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:。假设您有一个滚动条，那么固定的元素将随它一起滚动。 - Dejan.Sposition: relative;或position: absolute;。否则，它只是相对于<html>元素本身（即屏幕的左上角）。 参考：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ - VoidKingposition: fixed;或position: absolute;的祖先元素中，如果没有，则相对于<html>元素本身。 - VoidKing
position: sticky吗？ - DrevanTonderposition: sticky：https://caniuse.com/#feat=css-sticky - Dave Thieben