Question

我有两个Div（固定（用于背景图像）和绝对（用于文本））。布局如下：Fiddle Demo

#hintergrund {
    z-index: -9999;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

#textbox {
    position: absolute;
    top: 0;
    margin-left: 10%;
    padding-bottom: 2em;
    max-width: 28em;
    min-height: 100%;
    background: rgba(255, 255, 255, 0.8);
}

我尝试使用媒体查询将两个div的位置属性从固定更改为静态，从绝对更改为静态：After Mediaquery。

@media (max-width: 1024px) {

#hintergrund {
    position: static;
    height: 60%;
    width: 100%;
}    


#textbox {
    position: static;
    margin-left: 0;
    max-width: 100%;
    background: white;
}

}

现在我的问题：

我在全屏重新加载页面并降低viewportsize以“激活”mediaquery - ＆gt; #textbox仍然表现得像位置absolut但是从媒体查询中获取宽度和边距属性。

当我在mediaquery解析下重新加载页面时（一切都符合预期）并将viewportsize提升到mediaquery上方 - ＆gt; #textbox仍然表现得像静态位置BUT从正常的css（looks like this获取宽度等。）

所以到目前为止我的结论是，媒体查询无法正确更改位置属性，还是我错过了什么？

使用媒体查询更改位置属性无法正常工作

0 个答案: