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%;
}

当我这样做时，我得到了所有其他元素背后的实际背景。我会对任何工作方式感到满意。

P.S。对不起我的英语非常糟糕，这不是我的第一语言，我正在尽我所能。

Answer 1

我改变了你的css中的一些东西，这将允许搜索栏正确显示

注意：<body>标记应该是所有 DOM 元素的父级

请参阅代码段：

.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元素的搜索栏表单？

1 个答案: