div不会显示在文本框上方 [英] div not showing above text box

问题描述

我想在文字输入框开头显示搜寻图示。

I want to show a search icon over the start of the a text input box.

目前我的程式码如下：

<div id="search-icon"></div>
<input type="text" name="search" id="search"/>

和我的CSS：

#search-icon {
    display:inline-block;
    background-color:#455a21;
    height:60px;
    width:60px;
    border:thin solid black;
    border-radius:30px;
    z-index:100;
}

input#search {
    position:relative;
    top:-25px;
    left:-30px;
    padding:10px;
    padding-left:35px;
    border-radius:20px;
    border:thin solid #6d6e71;
    z-index:1;
}

它显示的div就在我想要的地方， 。

It shows the div right where I want it, but below the actual text box. When I change the search icon position to absolute, it screws up my positioning.

如何切换？

推荐答案

你可以使用两者的相对位置来解决它。

You can solve it using relative position for both. But just change their z-index.

#search-icon {

background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
position: absolute;
z-index: 2;
}

input#search {
position:absolute;
top:15px;
left:30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;}​

这是您正在寻找这里

这篇关于div不会显示在文本框上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！