html - 将 INPUT 与 div 完美对齐

Question

我想制作一个在悬停时激活的搜索栏，否则它不会出现。为此，我尝试了很多次，但代码运行不佳，因为我最近几个月才开始使用 css。我希望它们完全对齐，即 div 应该消失并且搜索栏必须覆盖被 div 覆盖的确切部分。

我已经尝试过使用填充和 css 边距，但是当屏幕尺寸和宽度发生变化时，它并没有按照我想要的那样完美地工作。

.element1, .element2, .element3, .element4, .element5, .element6, .element7 {
    background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Chrome 10+, Saf5.1+ */
    background:    -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* FF3.6+ */
    background:     -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
    background:      -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Opera 1        1.10+ */
    background:         linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
    border-radius:15%;
    max-height:110px;
    width: 7.2rem;
    font-family:"Nuntino";
    color: white;
    display:flex;
    opacity: 0.7;
    box-shadow:0.5px 0.5px 0.5px 0.5px #3A6073;
    text-align:center;
    align-items: center;
    justify-content: center;
}

<div class="Box">                                                
  <div class="element1" ><h1>Y</h1></div>
  <div class="element2" ><h1>O</h1></div>
      <div class="element3" ><h1>J</h1></div>
    <div class="element4" ><h1>A</h1></div>
      <div class="element5" ><h1>N</h1></div>
    <div class="element6" ><h1>A</h1></div>
</div>
<input type="text" />

Answer 1

对您的 div 使用 position:relative 属性并输入类型 Apply margin and padding 如果这不起作用则也使用 overflow:hidden 和 position relative