Question

我知道之前已经在本网站上询问过，我已经查看了所有答案。但是，我仍然无法找到解决方案。

当我调整浏览器大小时，我所有的div（以后都是按钮）都会互相重复。

＆＃13;

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: beige;
}

#Rosa {
  color: White;
  font-family: Arial Black;
  max-width: 100px;
  height: 25px;
  position: fixed;
  left: 90%;
  top: 1.5%;
  z-index: 2;
  padding: 2px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  overflow: hidden;
}

#Martin {
  color: White;
  font-family: Arial Black;
  max-width: 147px;
  height: 25px;
  z-index: 2;
  position: fixed;
  left: 77%;
  top: 1.5%;
  padding: 2px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  overflow: hidden;
}

#Malcom {
  color: white;
  font-family: Arial Black;
  max-width: 87px;
  height: 25px;
  padding: 2px;
  z-index: 2;
  position: fixed;
  left: 68.5%;
  top: 1.5%;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  overflow: hidden;
}

#Design {
  color: white;
  font-family: Arial Black;
  width: 60px;
  height: 25px;
  padding: 2px;
  z-index: 2;
  position: fixed;
  left: 62%;
  top: 1.5%;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  overflow: hidden;
}

.navigation a {
  text-decoration: none;
  color: black;
}

#Bar {
  min-width: 100%;
  max-height: 260px;
  position: fixed;
  top: 0px;
  z-index: 1;
}

＆＃13;

<div class="navigation">
  <div id="Rosa"> Rosa Parks </div>
  <div id="Martin">Martin Luther Jr.</div>
  <div id="Malcom">Maclom X</div>
  <div id="Design">Design</div>

  <img id="Bar" src=./assets/bar.png>
</div>

＆＃13;

感谢任何帮助。感谢。

P.S。这是一个导航栏，即使滚动也会保留在页面顶部。

Answer 1

你可以做类似的事情。这将使菜单保持向右或向左，具体取决于您选择的浮动，当窗口变小时，它不会互相覆盖。

＆＃13;

.navigation {
width: 100%;
height: 260px;
background-color: black;

}

.menu {
display: inline-block;
color: white;
float: right;
}

＆＃13;

<div class="navigation">
  <div class="menu" id="Rosa"> Rosa Parks </div>
  <div class="menu" id="Martin">Martin Luther Jr.</div>
  <div class="menu" id="Malcom">Maclom X</div>
  <div class="menu" id="Design">Design</div>

  
</div>

＆＃13;

Answer 2

这是一种使用<nav>的现代方法。有些人会说使用flexbox中的无序列表而不是链接，tomayto tomahto。

Scotch非常了解如何使用body { margin: 0; background-color: white; } header { position: fixed; display: flex; width: 100%; height: 50px; justify-content: space-between; background-color: black; box-shadow: 0 3px 3px rgba(129, 123, 123, 0.5); } main { padding-top: 50px; /* should match <header> height so <header> doesn't hide content */ min-height: 1500px; } p { margin: 0 0 1rem; } .primary { display: flex; align-items: center; } .primary > a { padding: 0 10px; color: white; }，您可以查看support on Can I Use。

<header>

  <img class="logo" src="http://placehold.it/50x50/A10">
  
  <nav class="primary flex">
    <a href="#rosa-parks">Rosa Parks</a>
    <a href="#mlk">Martin Luther Jr.</a>
    <a href="#malcom-x">Maclom X</a>
    <a href="#design">Design</a>
  </nav>
  
</header>

<main>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>

  <p>
    Lorem ipsum dolor.
  </p>
  
</main>

<img>

不确定您打算如何使用{{1}}，但我将其用作徽标。

Answer 3

div之间相互影响的原因是因为您在所有拥有ID的div中使用position: fixed和left（这不是一个好的做法）。

删除这些position: fixed和left，它应该可以正常运行。

Answer 4

在float: left

中为您的div使用position: fixed;代替left: Ypx;和.navigation

Answer 5

设置display: inline-block而不是设置位置。此外，如果将此类设置应用于多个图像，则应将它们放在类样式中。这样，每次要进行更改时都不必编辑多个样式。

您还应该从所有样式中删除位置，顶部，左侧，z-index。

在CSS中重叠DIV

5 个答案: