固定相对于父元素的位置

Question

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

父元素:

#search_results{
position:relative;
}  

子元素:

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

这可以正常工作,直到调整浏览器窗口大小.发生这种情况时,固定元素与其父元素重叠.你可以在这里看到我的问题: Twittiment

我试图将子元素修复到页面的顶部和父元素的右侧.有任何想法吗？

Answer 1

根据CSS Spec,定位的元素position: sticky;固定到视口而不是包含元素.

所以简短的回答是NO,你不能拥有一个fixed fixed相对于它的父元素的元素.您可以使用jQuery/JS position代替并position: absolute; top left right在运行时调整参数.

Answer 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

Answer 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
}