每当我将DIV设为:
.div {
position: fixed;
z-index: 9999;
}
我开始努力设置div宽度以适合/包裹父元素的整个宽度。如果我设置为整个页面的width: 100%;
延伸。 max-width
,min-width
的行为方式相同。我如何解决这个问题,以便div元素完美地适合父元素?
答案 0 :(得分:1)
在父元素上尝试:position: relative; display: block
。
第一个方兴未知的宽度%比例 WITH position: relative
。
编辑:正如@David Wilkinson所提到的,因为它们是根据窗口大小设置的,因此无法使用%width。
但是,您可能想尝试:width: inherit
(在固定的bloc和设置大小的父级和固定的bloc之间的任何一个区域)。
答案 1 :(得分:1)
请记住,当您将元素声明为position: fixed
时,您将其从文档的“正常”流程中取出 - 因此不要指望应用正常规则...举个例子:< / p>
.wrapper {
width: 50%;
background-color: red;
height: 100px;
margin: 0 auto;
}
.fixed {
position: fixed;
width: 100%;
height: 50px;
background: yellow;
top: 0;
left: 0;
}
<div class="wrapper">
<div class="fixed">
FIX ME!
</div>
</div>
正如你所看到的,即使div fixed
的div在我将其位置设置为100%时仍超出其父元素的宽度......
要模仿您要执行的操作,请尝试在子元素上使用position: absolute
并在父元素上使用relative
的其他方法:
.wrapper {
width: 50%;
background-color: red;
height: 100px;
margin: 0 auto;
position: relative;
}
.fixed {
position: absolute;
width: 100%;
height: 50px;
background: yellow;
top: 0;
left: 0;
}
<div class="wrapper">
<div class="fixed">
FIX ME!
</div>
</div>
注意 - 您可能需要向父元素添加一些顶部填充,以便子元素不与父元素的内容重叠...如果您还希望子div显示在文档的最顶部,那么'' ll还需要确保父div位于文档的开头。