Css 相对于父元素的固定位置

我对CSS比较陌生。我遇到了一个问题，我试图修复其父元素旁边的元素。我可以使用以下代码执行此操作：

父元素：

#search_results{
position:relative;
}  

子元素：

.total {
position: fixed;
top:10px;
width:250px;
left: 75%;
/*overflow: hidden;*/
margin-left: -125px;
}

在调整浏览器窗口的大小之前，此操作可以正常工作。发生这种情况时，固定元素与其父元素重叠。你可以在这里看到我的问题：

我试图将子元素固定到页面顶部和父元素的右侧。有什么想法吗？

编辑：

可以使用相对于父元素的

body>div{
高度：300px；
背景色：#ddd；
溢出：自动；
利润上限：70像素；
}
div>div{
高度：1000px；
位置：相对位置；
}
跨度{
显示：块；
高度：20px；
背景色：番茄；
位置：粘性；
排名：0；
}

这是一个相对粘性的标题
Lorem ipsum dolor sit amet，奉献精英。授权人必须遵守法律，确保不存在任何腐败行为，必须遵守法律规定，并遵守非流动性消费的规定

Lorem ipsum dolor sit amet，奉献精英。授权人必须遵守法律，确保不存在任何腐败行为，必须遵守法律规定，并遵守非流动性消费的规定

Lorem ipsum dolor sit amet，奉献精英。授权人必须遵守法律，确保不存在任何腐败行为，必须遵守法律规定，并遵守非流动性消费的规定

Lorem ipsum dolor sit amet，奉献精英。授权人必须遵守法律，确保不存在任何腐败行为，必须遵守法律规定，并遵守非流动性消费的规定

您要使用的是位置：绝对。这将根据子元素的父元素放置子元素

---

这里有一些阅读资料：

当然可以，只需要一个额外的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)

身体
背景：灰色
高度：8000px
.固定包装
位置：固定
顶部：20px
左：0
右：0
.封口
最大宽度：1200px
职位：相对
.结束
背景：#fff
宽度：30px
高度：30px
位置：绝对位置
右：0
边框：1px实心#515151
&：之前和之后
宽度：25px
高度：1px
背景：#515151
内容：“”
位置：绝对位置
最高：50%
左：50%
显示：块
@包括变换（平移（-50%，-50%）旋转（45度））
&：之后
变换：平移（-50%，-50%）旋转（-45度）

看到我为你做的小提琴了吗：-）

---

实现这一点的最佳方法是为父元素提供一个转换css。 例如：

---

不，它不。。。如果其父元素具有

位置：relative，则它会根据其父元素放置子元素或
位置：绝对设置。否则，它只与
元素本身相关（即屏幕最左上角）。参考：实际上，让我更正一下：它根据最近的祖先元素放置子元素，该元素具有
位置：fixed或
位置：绝对
，如果没有，则与
元素本身有关。过期…？可能需要额外的div。请检查@LaurieSpiegelworks的答案！一个比公认的“不可能”的最佳答案要好得多的答案。非常感谢。这是一个更好的答案，并解释了它的工作原理。您不能使用IE:浏览器兼容性不支持的
位置：sticky
？
位置：sticky
？这就像它是
位置：绝对：
。让我们假设你有一个卷轴，然后固定的元素将与它一起。很好的一个伴侣！！！
.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
}