Html 带有绝对位置和内联块的媒体查询，不'；似乎不适用于铬

有人能给我一些关于这种奇怪行为的线索吗

当浏览器很宽时，我们在表单的右侧有一个提示 领域这没关系

当我们缩小视口时，提示会到达底部 应该

当我们尝试重新缩放视口使其再次变宽时，提示文本 与其他元素重叠，而不是转到其原始位置 如预期的那样

Mac OS 10上的Chrome V.46

步骤1-浏览器完全打开-提示文本位于右侧

第2步-如果缩小视口，提示将移到底部。好的。

第3步-当我们尝试调整浏览器窗口的大小时，提示不会跟随位置：

步骤4-当提示忽略输入字段位置时，检查器就是这样的：

第5步-然后取消选中inspector窗口上的“绝对位置”，它保持如下状态：

第6步-最后，我选中同一个复选框，它会转到适当的位置。

就像以前有过类似问题的人一样

我试着用同样的规则在小提琴上重现这一点，不只是出于明显的原因使用完全相同的元素，但它似乎在那里起作用：

让我们假设我是一个表单元素包装器
我是一个提示文本块
div{
位置：相对位置；
宽度：100px；
}
.提示块{
显示：块；
颜色：蓝色；
}
@媒体屏幕和屏幕（最小宽度：56.25em）{
.提示块{
位置：绝对位置；
显示：内联块；
颜色：红色；
}
}

同样，这是Chrome唯一的问题。在其他浏览器上试用过，效果很好。但99%的时间都是我的错，所以，即使不是，我还是要设法解决这个问题

有什么线索或建议吗

更新： 下面是一个实时代码示例：

---

很抱歉我不得不删除该链接，因为该产品尚未上线，而且客户已经表达了担忧。

制作一个div，您可以在其中输入您的意见，怎么样？我认为应该行得通

我的建议是：

• 从帮助块中删除

  position:absolute

• 添加

  垂直对齐：中间
  以帮助阻止

对我来说，工作是一种魅力

添加

left:400px

到

@媒体屏幕和（最小宽度：56.25em）#checkoutform email+。提示块

解决了布局问题，但不是问题的根源

---

我认为这应该被视为一个浏览器问题。因为它计算绝对元素的初始左侧时考虑了其同级元素的宽度。。重新调整窗口后，会出现布局，不会再考虑兄弟宽度，与内部内容重叠。

< P>你不需要位置绝对值。移除它，它会自动工作

如果fiddle起作用，可能是其他CSS规则以某种方式覆盖了这些规则。看看你的实际代码是个好主意。其他一些类可能会覆盖你的CSS，如果你在JSFIDLE中发布完整的演示HTML代码，我们可以看看。FIDLE与你的问题有所不同。请让它显示相同的问题..更新了一个生活代码链接。这将是我的尝试。与其假设自动，不如声明具体的头寸数字…@MEM，缺点是这应该是某种自动的事情。。在提高响应能力时，添加特定的数字可能是一个问题。。我正在寻找一个解释，说明这是如何/为什么这样工作的。虽然解决了这个问题，但我将按照@jQuery00的建议测试删除绝对位置。我有这样的想法是有原因的，但我必须尝试一下，看看它是否还可以。是的，你可以用多种方式布置这个“提示块”，绝对位置绝对不是必须的。。但我认为问题的焦点应该是：理解当你使用

绝对位置时，重叠是如何发生的/为什么发生的。是的，理解这很好，但这似乎是chrome中的一个重画错误，所以在firefox中我无法复制它。在chrome中，绝对定位可能会保存窄视图中的位置，当再次将窗口调整为大绝对定位时，会保存虚拟顶部属性。对不起，我的英语。添加了垂直对齐：顶部，似乎比中间效果更好，同时与文本框并排。无论如何，这是有效的，而且似乎解决了灵活性问题。而这并不能解释Chrome上的问题。我会报告这个问题，但我不能真正复制它，所以，让我们把答案保留在这里，以备将来参考，以防有人发现同样的问题。
<div>Lets imagine I'm a form element wrapper</div>
<p class="hint-block">I'm a hint text block</p>

div {
    position: relative;
    width: 100px;
}

.hint-block {
    display: block;
    color: blue;
}

        @media screen and (min-width : 56.25em) {
            .hint-block {
                position: absolute;
                display: inline-block;
                color: red;
            }
        }