时间戳

首页 > 解决方案 > 下拉菜单和输入不应该是透明的

html - 下拉菜单和输入不应该是透明的

问题描述

我正在制作这个谷歌克隆，当下拉列表在视口宽度足够大时，它看起来很好，但如果视口很小，它会在输入后面并且看起来是透明的，如下图所示：

在此处输入图像描述

你们知道我该如何解决这个问题吗？请在响应式视口中尝试。

你可以在：https ://diefonro.github.io/HTML-CSS

PD：我试图修改 z-index 但它不起作用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Clone Optimized (by Diefonro)</title>
    <link rel="shortcut icon" href="assets/icons/favicon.ico" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <div class="nav">
          <div id="nav-g-i">
            <a class="menu-item" href="#">Gmail</a>
            <a class="menu-item" href="https://google.com/imghp">Images</a>
          </div>
          <div class="" id="nav-gr-a">
            <div class="dd-cont">
              <div class="grid">
                <img
                  id="grid"
                  src="assets/icons/apps_black_24dp.svg"
                  alt="apps-icon"
                />
              </div>
              <div class="drop-d">
                <div class="dd-item">
                  <img
                    id="dd-search"
                    src="assets/icons/google-logo-dd.png"
                    alt="google-search-icon"
                  />
                  <p>Search</p>
                </div>
                <div class="dd-item">
                  <img
                    id="dd-maps"
                    src="assets/icons/google-maps-dd.png"
                    alt="google-maps-icon"
                  />
                  <p>Maps</p>
                </div>
                <div class="dd-item">
                  <img
                    id="dd-keep"
                    src="assets/icons/google-keep-dd.png"
                    alt="google-keep-icon"
                  />
                  <p>Keep</p>
                </div>
                <div class="dd-item">
                  <img
                    class="dd-drive"
                    src="assets/icons/Google_Drive_dd.png"
                    alt="google-keep-icon"
                  />
                  <p>Drive</p>
                </div>
                <div class="dd-item">
                  <img
                    class="dd-calendar"
                    src="assets/icons/512px-Google_Calendar_icon_dd.png"
                    alt="google-calendar-icon"
                  />
                  <p>Calendar</p>
                </div>
                <div class="dd-item">
                  <img
                    class="dd-photos"
                    src="assets/icons/google_photos-dd.png"
                    alt="google-photos-icon"
                  />
                  <p>Photos</p>
                </div>
              </div>
            </div>
            <img
              id="profile-pic"
              src="assets/icons/account_circle_black_24dp.svg"
              alt="account-icon"
            />
          </div>
        </div>
      </nav>
    </header>
    <main>
      <section>
        <div class="logo-cont">
          <img
            id="google-logo"
            src="assets/images/googlelogo_color_272x92dp.png"
            alt="google-logo"
          />
        </div>
        <div class="input-cont">
          <input class="input-g" type="text" />
          <img
            src="assets/icons/search_black_24dp.svg"
            alt="search-icon"
            class="search-i"
          />
          <img
            class="mic"
            src="assets/icons/Google_mic.svg.png"
            alt="voice-search-icon"
          />
        </div>
        <div class="btn-cont">
          <button class="custom-btn">Google Search</button>
          <button class="custom-btn custom-btn-l">I'm Feeling Lucky</button>
        </div>
        <span class="s-lang"
          >Google offered in:
          <a href="#" class="s-link"
            ><div class="ll">Español (Latinoamérica)</div></a
          >
        </span>
      </section>
    </main>
    <footer>
      <div class="footer-cont">
        <div class="top-footer">
          <span class="f1">Colombia</span>
        </div>
        <div class="bottom-footer">
          <div class="left-footer">
            <div class="a-li">
              <a href="">About</a>
              <a href="">Advertising</a>
              <a href="">Business</a>
              <a href="">How Search works</a>
            </div>
          </div>
          <div class="right-footer">
            <a href="">Privacy</a>
            <a href="">Terms</a>
            <a href="">Settings</a>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>

* {
    margin: 0;
  }
  
  html{
    min-width: 100vw;
    overflow-y: hidden;
  }
  body {
    font-family: Arial, sans-serif;
  }
  
  nav {
    text-align: right;
    position: relative;
    top: 9px;
    right: 8px;
  }
  
  #nav-g-i {
    display: inline-block;
    position: relative;
    top: 2px;
    right: 23px;
  }
  
  #nav-gr-a {
    display: inline-block;
    position: relative;
    top: 5px;
    right: 10px;
  }
  
  #grid,
  #profile-pic {
    opacity: 50%;
  }

  #google-logo{
    width: 50%;
    max-width: 272px;
  }
  
  section {
    text-align: center;
    position: relative;
    top: 24px;
  }
  
  input{
    position: relative;
    bottom: 2px;
    width: 80%;
    word-wrap: break-word;
    /* max-width: 90%; */
    line-height: 17px;
    border: none;
    outline: none;
  }
  
  .input-cont {
    max-width: 553px;
    width: 70%;
    height: 16px;
    position: relative;
    bottom: 2px;
    right: 1px;
    color: #222;
    border: 1px solid #dfe1e5;
    font-size: 13px;
    padding: 14px;
    border-radius: 80px;
    margin: 24px 0px;
    display: inline-block;
  }
  .input-cont:hover,
  .input-cont:focus {
    box-shadow: 0 1px 5px 0 rgba(32, 33, 36, 0.28);
    border-color: rgba(40, 40, 41, 0);
  }
  
  .input-cont .mic {
    position: absolute;
    top: 10px;
    right: 11px;
    width: 23px;
  }

  .input-cont .search-i {
    position: absolute;
    top: 10px;
    left: 11px;
    max-width: 7.4%;
    opacity: 40%;
  }
  

  #grid {
    position: relative;
    bottom: 3px;
    margin-right: 16px;
  }
  .menu-item {
    font-size: 13px;
    color: #5b5f63;
    text-decoration: none;
    position: relative;
    bottom: 8px;
    margin-right: 10px;
  }
  
  .menu-item:hover {
    text-decoration: underline;
  }
  
  #profile-pic {
    width: 32px;
    height: 32px;
  }
  
  .btn-cont {
    position: relative;
    top: 3px;
  }
  
  .custom-btn {
    background-color: #f2f2f291;
    color: #a2a8af;
    font-size: 14px;
    height: 36px;
    padding: 0 16px;
    background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
    border: 1px solid transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
    color: #222;
    border-radius: 5px;
  }
  
  .custom-btn:first-of-type {
    margin-right: 7px;
  }
  
  .custom-btn:hover {
    border: 1px solid #c6c6c656;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #222;
  }
  
  .custom-btn:active {
    border: 1px solid cornflowerblue;
  }
  
  .drop-d {
    width: 285px;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: absolute;
    right: 11px;
    border-radius: 12px;
    display: none;
  }
  
  .grid:hover {
    display: inline-block;
  }
  
  .dd-item:hover {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
  }
  
  .dd-item {
    margin-top: 10px;
    display: inline-block;
    width: 70px;
    padding: 6px 3px;
  }
  
  .dd-item > img {
    height: 50px;
    width: 50px;
  }
  
  .dd-item > p {
    color: rgba(0, 0, 0, 0.87);
    margin: 0;
    margin-top: 15px;
    margin-bottom: 5px;
  }
  
  .dd-cont {
    display: inline-block;
  }
  
  .dd-cont:hover .drop-d {
    display: block;
  }
  
  .s-lang {
    font-size: 13px;
    color: #333;
    position: relative;
    top: 30px;
    right: 3px;
  }
  
  .s-lang a {
    text-decoration: underline;
  }
  .s-lang a:visited {
    color: rgb(30, 30, 179);
  }
  
  .ll {
    display: inline-block;
    position: relative;
    left: 3px;
  }
  
  .top-footer,
  .bottom-footer {
    font-size: 15px;
    background-color: #f3f3f3;
    color: #8a8686;
    position: relative;
  }

  .top-footer{
    border-bottom: 1px solid rgba(155, 155, 155, 0.267);

  }
  
  .left-footer a {
    display: inline-block;
    text-decoration: none;
    padding: 14.5px;
    font-size: 14px;
  }
  
  .right-footer a {
    font-size: 14px;
    margin-right: 10px;
    padding: 13px;
    text-decoration: none;
    color: #8a8686;
  }

  .bottom-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .bottom-footer a:hover{
    text-decoration: underline;
  }
  span.f1 {
    display: inline-block;
    margin-left: 15px;
    padding: 16px;
  }
  
  .a-li {
    margin-left: 20px;
  }
  
  a:visited {
    color: inherit;
  }
  
  .footer-cont {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;

  }

标签： htmlcss

解决方案

你有很多positioned元素，但它们都没有z-index，所以你所要做的就是在z-index你的下拉列表中添加一个；话虽如此，下拉菜单的背景目前是透明的，所以其他元素仍然会显示出来。只需为其添加背景颜色即可解决此问题。

.drop-d
{
  z-index: 1;
  background-color: white;
}

推荐阅读