13

我对 CSS 比较陌生。我遇到了一个问题，我试图修复其父元素旁边的元素。我可以使用以下代码来做到这一点：

父元素：

#search_results{
position:relative;
}

子元素： 

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

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

我正在尝试将子元素固定到页面顶部和父元素的右侧。有任何想法吗？

4

4 回答 4

25

编辑：

您可以使用position: sticky;which 可以相对于父元素。

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相对于它的父元素的元素。您可以改用jQuery/JS 并在运行时position: absolute;调整top left right bottom参数。

于 2013-08-09T20:17:38.030 回答
15

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

于 2015-04-27T16:03:33.263 回答
12

实现这一点的最好方法是给父元素一个变换 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
}
于 2017-11-26T10:51:32.260 回答
-4

您要使用的是 position:absolute 。这将根据其父元素放置子元素。

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

于 2013-08-09T20:22:18.160 回答