我遇到了困难:我有一个父元素,其大小不知道.而且我有一个物品必须永久地放在身体的顶部,然后position: fixed
,但我不能因为给它width: 100%
,是100%的身体,但我想要100%的父元素.我能怎么做?
示例:http://codepen.io/michele96/pen/jWbYQb
设置.fixed
的宽度为width: inherit;
不使用100%
body {
padding: 0;
margin: 0 auto;
}
.container {
position: relative;
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: fixed;
width: inherit; /*change here*/
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
Navbar Fixed
问题在于,与绝对定位的元素不同,固定定位元素的包含块通常是视口,而不是其最近定位的元素.然后,width: 100%
相对于视口宽度进行解析.
有一些方法可以改变这种行为,例如,transform
为固定位置的后代建立一个包含块的元素.但是,您的元素将不会固定在视口的顶部.
相反,你应该使用粘性定位:
.fixed {
position: sticky;
top: 0;
}
body {
padding: 0;
margin: 0 auto;
}
.container {
width: 70%;
height: 1000px;
background: red;
}
.fixed {
position: sticky;
top: 0;
line-height: 50px;
background: blue;
color: #f0f0f0;
text-align: center;
font-size: 20px;
}
Navbar Fixed