Image div中断文本输入HTML/CSS_Html_Css_Button

Image div中断文本输入HTML/CSS

html css button

Image div中断文本输入HTML/CSS,html,css,button,Html,Css,Button,我有一个简单的网页，我正在工作，我想添加一个搜索栏的网页。但是，当我添加搜索栏时，它不允许我单击/键入搜索栏。我最终发现，在删除此div后，我可以单击/键入： <div class="imagediv"> <img src="src/smallpaw.png"> </div> 您的imageDiv应该放在header div中。这就是它与输入框重叠的原因，您无法键入。希望它能帮助人类 <!DOCTYPE html> <htm

我有一个简单的网页，我正在工作，我想添加一个搜索栏的网页。但是，当我添加搜索栏时，它不允许我单击/键入搜索栏。我最终发现，在删除此div后，我可以单击/键入：

<div class="imagediv">
    <img src="src/smallpaw.png">
    </div>

您的imageDiv应该放在header div中。这就是它与输入框重叠的原因，您无法键入。希望它能帮助人类

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        #background: url("src/header.png") no-repeat;
      }
    </style>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300"
      rel="stylesheet"
    />
    <link rel="stylesheet" type="text/css" href="src/styles.css" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      input[type="text"] {
        width: 130px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-image: url("searchicon.png");
        background-position: 10px 10px;
        background-repeat: no-repeat;
        padding: 12px 20px 12px 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
      }

      input[type="text"]:focus {
        width: 100%;
      }
      input[type="text"]::placeholder {  

                  /* Firefox, Chrome, Opera */ 
                  text-align: left; 
              }
      input[type="text"]::-ms-input-placeholder {  

             /* Microsoft Edge */ 
             text-align: left; 
      }
    </style>
  </head>
  <body>
    <div class="header"></div>

    <div class="imagediv">
        <img src="src/smallpaw.png">
        </div>

    <h1>&nbsp&nbspStudent Information</h1>
    <br />

    <form>
      <input type="text" name="search" placeholder="Search" />
    </form>

  </body>
</html>

h1 {
  font-family: "Roboto", "Arial";
}
.header {
  overflow: hidden;
  background-color: #522e81;
  position: relative;
  z-index: 1;
  height: 77px;
}

.imagediv {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  max-width: 10%;
  max-height: 10%;
}

input[type="text"] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
input[type="text"]:focus {
  width: 30%;
}