为什么屏幕最小化时我的元素重叠？答案

【问题标题】：Why are my elements overlapping when screen is minimized?为什么屏幕最小化时我的元素重叠？
【发布时间】：2021-09-09 02:57:54
【问题描述】：

我是编码新手并加入了 TOP。学习编码过程的一部分是制作 Google 主页。这很困难，但我已经取得了一些进展。我当前的问题是当我最小化屏幕时，我注意到元素重叠。我已经玩过代码，但它仍然会发生。

.googlelogo {
  display: flex;
  padding: 7% 10% 10%;
  margin: 10% 40% 30%;
  justify-content: center;
}

.about {
  display: flex;
  position: absolute;
  bottom: 17%;
  height: 80%;
  margin-left: 1%;
}

.store {
  display: flex;
  position: absolute;
  bottom: 17%;
  height: 80%;
  margin-left: 6%
}

.gmail {
  display: flex;
  position: absolute;
  bottom: 17%;
  height: 80%;
  margin-left: 82%
}

.images {
  display: flex;
  position: absolute;
  bottom: 17%;
  height: 80%;
 margin-left: 87%
_____________________________________________________________________________



<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Google Homepage</title>
</head>

<body>
<div class="googlelogo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
</div>



<a class="about" href="https://google.com/about">About</a>
<a class="store" href="https://google.com/store">Store</a>

<a class="gmail" href="https://gmail.com">Gmail</a>
<a class="images" href="https://google.com/images">Images</a>

<div class="searchbox">
  <input type="text" name="" value="">
  <button type="search" name="button">Search</button>
</div>

</body>

</html>

Issue I'm having

【问题讨论】：

作为一种最佳实践，我通常会尽量避免绝对定位，除非绝对必要。因为您要从文档流中删除它，所以当空间变得紧张时，您在尝试管理冲突时从浏览器获得no 帮助。可以帮助您的一种选择是使用开发人员工具查看实际的 Google 主页，以了解他们如何构建页面和定位元素。

标签： html css element positioning overlapping

【解决方案1】：

所以我所做的更改是将锚元素标签包装在一个 div 中，并将这些 div 包装在一个部分标签中，然后给部分标签一个样式


<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Google Homepage</title>
</head>
<style>
.googlelogo {
  display: flex;
  padding: 7% 10% 10%;
  margin: 10% 40% 30%;
  justify-content: center;
}

.about {
  display: flex;
  position: absolute;
  bottom: 17%;
  height: 80%;
  margin-left: 1%;
}

.store {
  display: flex;
  position: absolute;
  bottom: 17%;
  height: 80%;
  margin-left: 6%
}

/* CHANGES MADE BELOW */
.itemsOnTheTop{
  position: absolute;
  top:0;
  left:0;
  right:0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* CHANGES MADE ABOVE */

</style>
<body>
<div class="googlelogo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
</div>

<!-- CHANGES MADE BELOW -->
<section class="itemsOnTheTop">
  <div>
    <a class="" href="https://google.com/about">About</a>
    <a class="" href="https://google.com/store">Store</a>
  </div>
  
  
 
  <div>
    <a class="" href="https://gmail.com">Gmail</a>
    <a class="" href="https://google.com/images">Images</a>
  </div>
</section>
<!-- CHANGES MADE ABOVE -->



<div class="searchbox">
  <input type="text" name="" value="">
  <button type="search" name="button">Search</button>
</div>

</body>

</html>

【讨论】：