html - CSS:position:absolute；导致输入元素在 Chrome 中输入时移动

Question

我在网格中有一个搜索框，但由于某种原因，当用户开始在其中输入时，输入框几乎跳到页面的另一边。我缩小了范围，发现是 position: absolute 导致的。这只发生在 Chrome 中。代码有什么问题？

CSS:

header {
    display: grid;
    grid-template-columns: 15% 50% 30% 5%;
    height: 40px;
    width: auto;
    /*border: 1px solid red;*/
    margin-left: 26.5%;
    margin-right: 50px;
    margin-top: 35px;
    position: relative;
}

header input {
    grid-column-start: 3;
    margin-top: 2px;
    margin-bottom: 2px;
}

.searchStyle {
    border: none;
    background-color: transparent;
    width: 75px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    position: absolute;
    right: 60px;
    top: 21%;
}

.searchStyle:focus {
    width: 200px;
    border-bottom: 1px solid #BA9765;
    outline: none;
}

HTML:

<header>
    [other code]

    <input class="searchStyle" type="text" placeholder="SEARCH…" id="search-bar" />
    [other code]
</header>

Here's the issue in Chrome.

Here's what it should look like (Firefox).

Answer 1

没有找出为什么 position: absolute 在 Chrome 中会导致此问题，但设法通过删除 position absolute 找到解决方案，将输入放在 div 中并使用这些值为该 div 创建一个类:

.gridAlign {
    grid-column-start: 3;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
    margin-top: 7px;
    margin-bottom: 7px;
}