关于CSS：相对于父元素的固定位置

Fixed position relative to parent element

本问题已经有最佳答案，请猛点这里访问。

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

父元素：

1
2
3

#search_results{
position:relative;
}

子元素：

1
2
3
4
5
6
7
8

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

这很好，直到调整浏览器窗口的大小为止。发生这种情况时，固定元素将与其父元素重叠。您可以在这里看到我的问题：
附子

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

相关讨论

编辑：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1
2
3
4
5

This is a relatively sticky header
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.
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.
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.
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.

旧答案：

根据CSS Spec，位于fixed的元素固定在视口，而不是包含的元素。

因此简短的回答是"否"，相对于其父元素，您不能有一个fixed position元素。您可以改用position: absolute;并在运行时使用jQuery / JS调整top left right bottom参数。

相关讨论

当然可以，只需要一个额外的div！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

相关讨论

实现此目的的最佳方法是给父元素一个转换CSS。
例如：

1
2
3
4
5
6
7
8
9

.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。这将根据其父元素放置子元素。

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

相关讨论