CODEWITHSUNDEEP
javascriptjqueryhtmlcsssearchbar
True Bloods
True Bloods

Reputation: 31

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

I am trying to make a search bar that appears by overlapping other elements of the web page. A good example of what I am trying to achieve would be at this Page

As you can see when the search icon is pressed it pops up on the whole screen.

I have tried doing something like this:

<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>

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

When I do that I get an actual background behind all of the other elements.I will be happy with any working way to this.

P.S. Sorry for my very bad English it is not my first language and I am doing my best.

Upvotes: 1

Views: 3002

Answers (1)

Chiller
Chiller

Reputation: 9738

I changed i few things in your css which will allow the search bar to be displayed correctly

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

See code snippet:

.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>

Upvotes: 1

Related Questions