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，定位fixed的元素固定在视口而不是包含元素。

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

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
}

Answer 4

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

这里有一些读物：http://www.w3schools.com/cssref/pr_class_position.asp

固定相对于父元素的位置

4 个答案: