html - 图像 div 打破文本输入 HTML/CSS
问题描述
我正在处理一个简单的网页,我想在该页面上添加一个搜索栏。但是,当我添加搜索栏时,它不会让我在栏中单击/键入。我最终发现在删除这个 div 后我可以点击/输入它:
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
这用于在我的页面标题上放置一个徽标,我无法弄清楚为什么这会破坏搜索输入。显然我想在我的标题上保留这个标志,但任何帮助都将不胜感激。
这是我的 index.html:
<!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>  Student Information</h1>
<br />
<form>
<input type="text" name="search" placeholder="Search" />
</form>
</body>
</html>
这是我的styles.css:
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%;
}
解决方案
您的 imageDiv 应该放在标题 div 内。这就是它与输入框重叠并且您无法输入的原因。希望对人有所帮助!
推荐阅读
- reactjs - 如何在反应中实现和解概念?
- javascript - 为什么要在函数之外使用原型
- reactjs - React Redux:可以使用 useDispatch 连接到动作创建者吗?如果是这样,如何?
- c# - 每次执行启动倒计时时,冷却计时器的速度都会加倍
- python - 如何用与元素相同的矩阵初始化块矩阵?
- python - 使用 selenium bs4 和 python 从网站中提取链接
- python - 如何在 Python 中按长度拆分输入
- vue.js - VueJS 中的条件 @click for
- python - Pyzbar 不适用于 Ubuntu
- python - 如何获得数据集中所有年份的最小值和月份?(熊猫)