如何制作覆盖其他 HTML 元素的搜索栏表单？

Question

我正在尝试制作一个搜索栏，它通过重叠网页的其他元素出现。我正在努力实现的一个很好的例子就是 Page

正如您所见，当按下搜索图标时，它会在整个屏幕上弹出。

我试过这样做：

<div class="search-overlay">
    <body>
        <!-- Bootstrap navbar goes here -->
        <div class="orange-search">
            <form action="search.php" method="post">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">               
            </form>
      </div>
  </body>
</div>

和 css:

.search-overlay {
width: 100%;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
background-color: rgba(16,37,66,0.9);
}

body {
background-color: #F5F5F5;
color:#F87060;
height:1000px;
/*background-image: url(res/imaage.png);*/
}

.orange-search {
/*this is the search bar inside and I know */
/*the display is hidden but I have jQuery code that changes that*/
display: none;
width:21%;
position: absolute;
left: 39.6%;
top: 48%;
}

当我这样做时，我得到了所有其他人背后的实际背景 elements.I 将对任何工作方式感到满意。

P.S。抱歉我的英语很糟糕，它不是我的第一语言，我正在尽力而为。

Answer 1

我更改了您的 css 中的一些内容，这将使搜索栏能够正确显示

Note: <body> tag should be the parent of all DOM elements

查看代码片段：

.search-overlay {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(16, 37, 66, 0.9);
}

body {
  background-color: #F5F5F5;
  color: #F87060;
  height: 100vh;
  margin: 0;
  /*background-image: url(res/imaage.png);*/
}

.orange-search {
  /*this is the search bar inside and I know */
  /*the display is hidden but I have jQuery code that changes that*/
  width: 21%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="search-overlay">
    <!-- Bootstrap navbar goes here -->
    <div class="orange-search">
      <form action="search.php" method="post">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      </form>
    </div>
  </div>
</body>

如何制作覆盖其他 HTML 元素的搜索栏表单？

How can I make a Search bar form that overlays other HTML elements?

html

javascript

css

jquery

searchbar