Question

我一直试图把我的搜索栏放在我的图像上，我不太确定我错过了什么。我试图改变位置，对于搜索栏而言，除了在图像外部移动它之外似乎没有做太多。

.headerNav {
    position: fixed;
    top: 0;
    left: 0;
    height: 35px;
    width: 100%;
    background: #601F27;
}

.headerNav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.headerNav li {
    float: left;
}

.headerNav a {
    display: block;
    width: 10em;
    margin: 0;
    text-decoration: none;
    font-weight: 700;
    color: white;
    text-align: center;
    height: 35px;
    line-height: 35px;
}

.headerNav a:hover {
    background: #f9d4cc;
}

.container {
    margin: 1.2rem 10rem 1rem 10rem;
    padding: 1rem;
    position: relative;
}

.container img {
    height: 425px;
    width: 1500px;
}

form {
    width:500px;
    /*margin:0 auto;*/
    position:relative; 
    z-index: -1;
}
.search { 
    padding:0px 200px 25px 0px;
    margin:0px; 
}

input[type=text] {
    color: white;
    font-size: 50px;
}

input[type=button], input[type=button]:hover {
    position:absolute; 
    left:0px;
    border:1px solid #adc5cf;
    background: #e4f1f9; /* Old browsers */
    background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
    background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */
    color:#7da2aa;
    cursor: pointer;
}

.dark {
    width:95%;
    height:50px;
    padding:0px 0px;
}

.dark input[type=text] {
    border:1px solid #2a2e31;
    background-color:#2d3035;
    color:white;
}

    <div class="header">
        <div class="headerNav">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="account.html">Log In / Sign Up</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="container">
        <img src="img/bg1.jpg" alt="" />
        <div class="dark">
        <form>
            <span><input type="text" class="search square"><input type="button" value="Search"></span>
        </form>
    </div>
</div>

任何人都可以帮忙解决这个问题吗？我的html / css不太好。

Answer 1

您需要将绝对位置应用于图像position: absolute;，并将z-index应用于搜索z-index: 1;

＆＃13;

.headerNav {
  position: fixed;
  top: 0;
  left: 0;
  height: 35px;
  width: 100%;
  background: #601F27;
}
.headerNav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.headerNav li {
  float: left;
}
.headerNav a {
  display: block;
  width: 10em;
  margin: 0;
  text-decoration: none;
  font-weight: 700;
  color: white;
  text-align: center;
  height: 35px;
  line-height: 35px;
}
.headerNav a:hover {
  background: #f9d4cc;
}
.container {
  margin: 1.2rem 10rem 1rem 10rem;
  padding: 1rem;
  position: relative;
}
.container img {
  height: 425px;
  width: 1500px;
  position: absolute;
}
/* search bar */

form {
  width: 500px;
  /*margin:0 auto;*/
  position: relative;
  z-index: -1;
}
.search {
  padding: 0px 200px 25px 0px;
  margin: 0px;
  z-index: 1;
}
input[type=text] {
  color: white;
  font-size: 50px;
}
input[type=button],
input[type=button]:hover {
  position: absolute;
  left: 0px;
  border: 1px solid #adc5cf;
  background: #e4f1f9;
  /* Old browsers */
  background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4f1f9), color-stop(100%, #d5e7f3));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%);
  /* IE10+ */
  background: linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e4f1f9', endColorstr='#d5e7f3', GradientType=0);
  /* IE6-9 */
  color: #7da2aa;
  cursor: pointer;
}
.dark {
  width: 95%;
  height: 50px;
  padding: 0px 0px;
}
.dark input[type=text] {
  border: 1px solid #2a2e31;
  background-color: #2d3035;
  color: white;
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="header">
    <div class="headerNav">
      <nav>
        <ul>
          <li><a href="index.html">Home</a>
          </li>
          <li><a href="account.html">Log In / Sign Up</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="container">
    <img src="img/bg1.jpg" alt="" />
    <div class="dark">
      <form>
        <span><input type="text" class="search square"><input type="button" value="Search"></span>
      </form>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 2

如果要将图片作为背景，则应将其添加为CSS中的background-image，而不是HTML中的<image/>标记。

Answer 3

更好的方法是将暗级位置设置为绝对位置并根据需要定位（左侧，顶部）。

此外，您必须相对容器类位置。

在图像上放置搜索栏

3 个答案: