CODEWITHSUNDEEP
htmlcssiconssidebar
CodeIsLaw
CodeIsLaw

Reputation: 345

HTML put an icon in front of webpage

Until now I got a webpage with a navigation bar, which is responsible to screensize, all is fine until this point. But now it becomes a bit strange for me, I want to add a search icon (loupe) in the bottom left hand corner. My idea was to use the "aside" element (or "aside" section?) which is supported in html5, but if I put my icon in this aside element it is not visible. I hope you can help me. here some html code:

HERE IS SOME OTHER CODE WHICH WORKS PERFECT
.
.
.

<!-- Search Icon beginn -->
<aside>
  <div class="searchicon">
    <a href="#"><img src="img/Searchicon.png" alt="Search" height="30px" width="30px"></a>

  </div>
</aside>

<!-- Search Icon end -->

</body>

My plan is that the search icon is always on the left of the webpage (kind of a sidebar), I don't want to cover up the text which is at the site later on.

Thanks to you!

Upvotes: 1

Views: 1222

Answers (2)

j-petty
j-petty

Reputation: 3026

The positioning of HTML elements is controlled in your CSS. In your case this is the searchicon class. You haven't provided the CSS but it might look something like this:

.searchicon {
    position: fixed;
    left: 150px;
    bottom: 150px;
    z-index: 2;
}

As a note, the aside element may not be the "most semantic" option based on what you've described. The HTML5 aside is intended to contain content that doesn't directly relate to the pages primary content. For example a sidebar containing related articles.

Upvotes: 0

Bryson Lee
Bryson Lee

Reputation: 36

Try changing the z-index in css which will basically move an HTML element forward/backward : 

.searchicon {
    z-index: 2;
}

/*
Set the value to negative if you want the element to move backwards.
*/

Upvotes: 2

Related Questions