<input> 标记中的插入符号超出块答案

【问题标题】：Caret in <input> tag is over block<input> 标记中的插入符号超出块
【发布时间】：2018-07-09 15:54:11
【问题描述】：

这真是个疯狂的错误！

看看下面的截图

在 Internet Explorer 11 中，当我在输入集中时向下滚动时，插入符号位于标题上方（输入元素位于标题下方，一切都很好）。

一般标记：

<div class="wrapper">
  <header></header>
  <div class="form">
    <input type="text">
  </div>
</div>

样式：

.wrapper {
  height: 1000px;
}

header {
  background: yellow;
  width: 100%;
  height: 100px;
  position: fixed;
}

input {
  margin-top: 200px; 
}

截图：
https://i.stack.imgur.com/4xu1O.png
https://i.stack.imgur.com/DalJN.png

链接到我的 Google 云端硬盘上的文件：https://drive.google.com/file/d/1KW1ztPbMXFNfzzNmsYBYnBnl_BEarafU/view?usp=sharing
Codepen：https://codepen.io/wrangler53/pen/JBPZby
只需在 Internet Explorer 11 中打开它

如何解决？输入和插入符号应位于标题下方。 z-index 没有帮助

【问题讨论】：

请提供密码或您的完整页面代码，以便我们为您提供帮助。截图是不够的。谢谢
当然，只需在 Internet Explorer 11 中打开它。Codepen：codepen.io/wrangler53/pen/JBPZby.Link 到我的 Google Drive 上的文件：drive.google.com/file/d/1KW1ztPbMXFNfzzNmsYBYnBnl_BEarafU/…
您需要在问题中发布一个可重现的示例。以下是标记选项中的文本 - “寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定问题或错误以及 重现它所需的最短代码问题本身。 没有明确问题陈述的问题对其他读者没有用处。"
这不是一个错误，它在 chrome 中也是一样的，如果您将任何元素定位固定，无论您做什么，它都会留在您放置的任何位置，并且因为您的输入没有位置将在固定元素下方滚动的元素，如果你想在 div 上看到它，如果你将位置应用于输入
Jismon Thomas，我无法在 Chrome 中重现此错误

标签： html css forms input internet-explorer-11

【解决方案1】：

我已经在sn-p中添加了你的代码和定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
      .wrapper {
        height: 1000px;
      }
      header {
        background: red;
        width: 100%;
        height: 100px;
        position: fixed;
        z-index: 10;
      }
      input {
        margin-top: 200px;
        position:absolute;
        z-index: 5;
      }
  </style>
  <script>
  </script>
</head>
<body>
  <div class="wrapper">
    <header></header>
    <div class="form">
      <input type="text">
    </div>
  </div>
</body>
</html>

【讨论】：

这个输入应该在标题下...我已经将输入的 z-index 更改为 5，标题更改为 10。同样的问题:(
我也交换了 z-index，但它似乎对我有用，你能检查一下上面更新的 sn-p。