css 两个固定位置元件引发一些问题

vlurs2pr 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(116)

当我尝试为CSS中的两个元素添加position: fixed;规则时，:hover不能在第一个元素的子元素上正常工作。为什么会发生这种情况，我如何修复它？
我知道问题出在固定的规则上，因为当我从第二个元素中删除它时，代码会按预期工作。

nav {
  border: 5px solid rgb(255, 0, 0);
  width: 96.5vw;
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  height: 10vh;
  background-color: rgb(255, 216, 143);
  justify-content: space-evenly;
}

nav div {
  position: relative;
  bottom: 1vh;
  flex-grow: 0.1;
}

nav div:hover {
  background-color: red;
}

#boxar {
  border: 10px solid rgb(156, 125, 0);
  position: fixed;
  /*comment this line out*/
  top: 0;
  left: 0;
  width: 95vw;
  height: 97vh;
}

<nav>
  <div id="homeb">
    <h1>Home</h1>
  </div>

  <div id="teamb">
    <h1>Team</h1>
  </div>

  <div id="standb">
    <h1>Standings</h1>
  </div>
</nav>
<div id="boxar"></div>

css

来源：https://stackoverflow.com/questions/75953237/two-fixed-position-elements-spark-some-problems

1条答案

按热度按时间

x8diyxa71#

这不起作用，因为boxer div覆盖了你试图悬停的div。所以我把boxar的z索引设置为负，以使其位于悬停div的后面。

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<style>
  nav {
    border: 5px solid rgb(255, 0, 0);
    width: 99.3%;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    height: 100px;
    background-color: rgb(255, 216, 143);
    justify-content: space-evenly;
  }
  
  nav div {
    text-align: center;
    background-color: gold;
    position: relative;
    
    flex-grow: 0.1;
  }
  
  nav div:hover {
    background-color: red;
  
  }
  
  #boxar {
    border: 10px solid rgb(156, 125, 0);
    position: fixed;
    top: 0;
    left: 0;
    width: 98.6%;
    height: 97vh;
    z-index: -1;
  }
</style>

<body>

  <nav>
    <div id="homeb">
      <h1>Home</h1>
    </div>

    <div id="teamb">
      <h1>Team</h1>
    </div>

    <div id="standb">
      <h1>Standings</h1>
    </div>
  </nav>
  <div id="boxar"></div>

</body>

</html>

我喜欢你的代码，但它不是很标准，把每一个单独的立场，由自己。
我推荐下面链接中的代码：
Flex navbar at codepen

赞(0）回复(0）举报 2023-04-08

我来回答

css 两个固定位置元件引发一些问题

1条答案

相关问题

热门标签

最新问答