HTML 在网页前面放置一个图标

Question

到现在我得到了一个带有导航栏的网页，它负责屏幕大小，到此为止一切正常。但现在对我来说有点奇怪，我想在左下角添加一个搜索图标（放大镜）。我的想法是使用 html5 支持的 "aside" 元素（或 "aside" 部分？），但是如果我将我的图标放在这个 aside 元素中，它是不可见的。我希望你能帮助我。这里有一些 html 代码：

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>

我的计划是搜索图标总是在网页的左侧（有点像侧边栏），我不想掩盖稍后在网站上的文本。

谢谢你！

Answer 1

尝试更改 css 中的 z-index，这基本上会移动 HTML 元素 forward/backward :

.searchicon {
    z-index: 2;
}

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

Answer 2

HTML 个元素的定位由您的 CSS 控制。在您的情况下，这是 searchicon class。您没有提供 CSS 但它可能看起来像这样：

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

请注意，根据您的描述，aside element 可能不是 "most semantic" 选项。 HTML5 旁边的内容旨在包含与页面主要内容没有直接关系的内容。例如包含相关文章的边栏。

HTML 在网页前面放置一个图标

HTML put an icon in front of webpage

html

css

icons

sidebar