HTML:
<div id='id1'>
<div id='id2'>
</div>
</div>
CSS:
#id1 {
width: 300px;
height: 200px;
margin: 0 auto;
background: red;
position: relative;
}
#id2 {
position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;
width: 100%; top: 20px; background: green; height: 30px;
}
我希望#id2 占据全屏宽度。我可以指定左:-Npx 和右:-Npx,但这仅适用于某些屏幕尺寸。
id2不能超出screen,所以不能指定left:-9999px;
相关 fiddle :https://jsfiddle.net/aLubmd4a/
最佳答案
这是一个部分解决方案,我将 #id2
元素的 position
从 position:absolute;
更改为 位置:固定;
更新了您的 fiddle 示例:https://jsfiddle.net/aLubmd4a/2/
如果我理解正确的话,你想要实现的目标是不可能的。元素的大小和位置必须与某些上下文相关。
在您的示例中,您希望它采用 body 的宽度,但相对于您的 #id1
元素定位(垂直),对吗?如果是这样,您应该选择一边,或者从 #id1
中取出内部 div (#id2
),或者确保更新内部 #id2
相应地。
关于html - 当绝对定位元素在固定宽度容器内时,如何使它占据全屏宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43114304/