html - 粘性位置和元素与另一个元素重叠的问题

Question

我只使用 HTML 和 CSS 制作了一个页面。试图让它响应。我说，我做到了，但有一些问题。首先，我的导航不粘。我希望它在滚动时粘在顶部，但它不起作用。第二件事是，当我为移动设备调整屏幕大小时，带有“kid desni”类的 div 会超过带有“kid levi”类的 div。为什么会这样？此外，在更大的屏幕上，class="kid levi" 的 div 和 class="kid desni" 的 div 应该彼此相邻对齐，但 class "desni" 的 div 比它应该的高一点。并且 img 不会占用其父 div 的全部空间。第三件事是，你知道如何让蓝色部分“为什么要冒险旅行”看起来像这样吗？第四，下面的那些小图像在底部被剪掉了，如果你能看到的话，一点点。我怎么做？我希望你能理解我在这里想要达到的目标。:) 这是我要修复的 HTML 代码的一部分：

<div class="container">
    <header class="" >
        <div style="height: 30px;">
            <nav>
                <div class=logo>
                    <img src="images/logoicon.png" alt="sunce">
                    <img src="images/logotext.png" alt="outdoors" id="logotext"></a>
                </div>
                <ul class="nav-ul">
                    <li><a href="#">Destinations</a></li>
                    <li><a href="#">Travel style</a></li>
                    <li><a href="#">Trabel deals</a></li>
                    <li><a href="#">Gear</a></li>
                </ul>
                <div class="forma">
                    <input type="search" placeholder="search" class="pretraga">
                    <i class="fa fa-search"></i>
                </div>
            </nav>
        </div>

    </header>
    <main>
        <h1 style="text-align: center; margin-top: 70px;">CONNECT TO THE WORLD</h1>
            <div class="content">
            <div class="kid levi">
                <div>
                    <h3>Our worls deservs more you</h3>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit tempore
                    velit impedit praesentium corporis sunt iure eaque, laudantium mollitia dicta eos eum
                    assumenda inventore itaque qui harum repudiandae error repellat.
                </div>
                <div>
                    <h3>Whatever your style see it your way</h3>
                    Lorem ipsum dolor, sit amet consectetur
                    adipisicing elit. Quisquam nihil, maiores soluta eos modi dolor error. Accusamus saepe mollitia
                    eaque, possimus fuga libero voluptatum consectetur asperiores vitae porro voluptatibus velit?
                </div>
            </div>
            <div class="kid desni"> <!-- this is the div with and img that needs to be aligned and overlaps div above on small screen -->
                <div>
                    <img src="images/img-connect.jpg" alt="conn" id="conn"
                    style="max-width: 80%; max-height: auto; margin-top: 50px;" >
                </div>
            </div>
        </div><br>

这是CSS：

      nav {
      background-color: steelblue;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      position: sticky;
      top: 0;
    }
    
    .nav-ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      /* background-color: #333; */
    }
    
    .nav-ul li {
      display: inline;
      float: left;
    }
    
    .nav-ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .nav-ul li:last-child {
      float: right;
    }
    
    .nav-ul li a:hover:not(.active) {
      background-color: #111;
    }
    
    #logotext {
      margin-bottom: 10px;
      margin-left: 10px;
    }



   main {
  width: 95%;
  margin: auto;
}

.content {
  display: flex;
  margin-bottom: 70px;
}

.levi {
  display: flex;
  flex-direction: column;
}

.kid {
  display: flex;
  width: 100%;
  height: 200px;
  align-items: center;
  margin: 0;
}

这适用于较小的屏幕：

    @media screen and (max-width: 768px) {
  nav {
    display: block;
    text-align: center;
  }

  .nav-ul,
  .nav-ul li {
    float: none;
  }

  .nav-ul li:last-child {
    float: none;
  }

  .container {
    width: 100%;
  }

  .content {
    /* display: block; */
    flex-direction: column;
  }

  .kid {
    /* display: block; */
  }

  .levi {
    /* display: block; */
  }

  .desni {
    display: none;
  }

这是它的样子：

我就是这样做的。显示大屏幕和小屏幕。

标签： htmlcss