我可以在导航栏前面但在导航栏图标和按钮后面给出图像吗？

Question

对不起，如果标题让您感到困惑，但是我们可以使图像背景出现在导航栏背景的前面，但是在导航栏图标的后面吗？

当前我的进度看起来像这样

您可以看到图像成功出现在导航栏背景的前面，但是没有出现在导航栏文本或图标的后面，您可以特别看到图像封面home出现在其后面的地方。

我也完全知道navbar是否具有默认的z-index: 4，因此我将图像设置为具有z-index: 5，并且家庭，新闻和联系人设置为具有z-index: 6，但它看起来仍然像我显示的图像] >

这是我的代码，如果您想尝试的话

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}body {
  margin: 0;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  z-index: 4;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 0.8em;
  text-align: right;
  z-index: 6
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content::before{
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    height: 600px;
    width: 600px;
    background: url("https://freepngimg.com/thumb/castle/23440-6-fantasy-castle-picture.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
}

.content {
  padding: 16px;
  margin-top: 400px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Massa enim nec dui nunc mattis enim. Proin sed libero enim sed faucibus turpis in eu mi. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Venenatis lectus magna fringilla urna porttitor rhoncus. Hac habitasse platea dictumst quisque sagittis purus sit. Posuere ac ut consequat semper viverra nam. Viverra orci sagittis eu volutpat odio. Nec feugiat in fermentum posuere.

Iaculis eu non diam phasellus vestibulum lorem sed risus. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum. Egestas quis ipsum suspendisse ultrices gravida dictum. Morbi tempus iaculis urna id. Ullamcorper sit amet risus nullam eget felis eget. Tincidunt arcu non sodales neque sodales ut. Posuere ac ut consequat semper. Est sit amet facilisis magna etiam tempor orci. Porttitor leo a diam sollicitudin tempor id eu. Sed velit dignissim sodales ut eu sem integer vitae justo. Viverra nibh cras pulvinar mattis nunc sed.

Ornare suspendisse sed nisi lacus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Sapien eget mi proin sed libero enim sed faucibus turpis. In vitae turpis massa sed elementum tempus egestas sed. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mus mauris vitae ultricies leo integer malesuada nunc. Vel risus commodo viverra maecenas accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Sit amet mauris commodo quis imperdiet massa tincidunt. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et.
</div>

</body>
</html>

有人可以帮我解决这个问题吗？我陷入了这个问题

[如果标题让您感到困惑，对不起，但是我们可以使图像背景出现在导航栏背景的前面，而不是导航栏图标的后面吗？目前我的进度看起来像这样。您可以看到...

Answer 1

父级的z-index是确定顺序的那个。子元素z-index的a是在父级内部的上下文中计算的。我建议将img作为导航栏的一部分，然后更改为position: absolute，这样您就可以控制img的位置，并且可以更改导航栏内的z-index布局，即img和导航是否共享同一父项。

Answer 2

您可以仅将z-index:5设置为内容div。内容和导航栏是同一元素的子元素，因此您可以设置z-index属性来定义z轴周围的位置。

我可以在导航栏前面但在导航栏图标和按钮后面给出图像吗？

问题描述投票：0回答：2

2个回答

最新问题

我可以在导航栏前面但在导航栏图标和按钮后面给出图像吗？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2