Question

我不知道这里发生了什么：

<div style="position: absolute; width: 70px; height: 100px; left: 60px; top: 30px; overflow:hidden; background-color: rgb(255, 192, 192);">
  <div style="position: absolute; top: 22px; left: 18px;">
    <input type="text" placeholder="type here" style="width: 150px; height: 21px; overflow: hidden;"/>
  </div>
</div>

http://jsfiddle.net/7MX54/1/

键入文本框，然后更改其位置。没有JS参与！这是为什么？哪个CSS规则可以拯救？

编辑：谢谢你的澄清。我将宽度改为100％ - 足够好： http://jsfiddle.net/7MX54/2/

Answer 1

实际上，文本框的位置并没有改变;它的容器正在滚动。这是一个浏览器可访问性的东西，CSS不能这样做。

例如，当焦点更改为视图外的某些内容时，您会在任何overflow: hidden;容器中发现同样的事情。

Answer 2

如果您有一大堆文本框并且您通过它们进行选项卡，最终页面将“神奇地”向下滚动，以便您输入的文本框在视图中。这是完全一样的。浏览器将确保您可以看到您键入的位置。

overflow:hidden不禁止滚动，它只是禁用滚动条。滚动位置仍然可以通过JavaScript或文本框进行更改，如此处所示。

Answer 3

问题是，你的输入是它的父级比你的包装div宽。使外部div的宽度最小为170px，问题就消失了。

或者使输入的宽度足够小以使其适合包装。

Answer 4

如果增加第一个div宽度，则可以看到输入。例如：width: 270px;

Answer 5

感谢您的澄清。我把宽度改为100％ - 足够好了：

<input type="text" placeholder="type here" style="width: 100%; height: 21px;"/>

http://jsfiddle.net/7MX54/2/

输入</div>时，为什么溢出<div>内的<input />会自行移动

5 个答案: