Question

当我为#sideBar div输入样式时，没有任何内容出现...我尝试过使用z-index属性，但似乎没有任何工作。基本上，我想要的是在我的页面左侧有一个带有这些特定尺寸的黑色侧边栏。我猜我在某处写错了但我无法查明错误。

<!doctype html>
<html>
    <head>
        <title>Noam's Website</title>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="backgroundCover"></div>
        <div id="sideBar"></div>
    </body>
</html>

html {
    height: 100%;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/background2.jpg);
    background-size: cover;
}
#backgroundCover {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.4;
}
#sideBar {
    width: 50px;
    height: 100%;
    float: left;
    background-color: black;
}

Answer 1

在我看来下面。你想要达到的目标是什么？你想让你的侧边栏位于灰色背景之上吗？

如果是，请将以下内容添加到#sideBar

position: absolute;
top: 0;
left: 0;

我不确定 ID 的用例是什么，但在大多数情况下，我建议使用类而不是 ID ，因为< EM>特异性。

特异性是指CSS声明的权重。如果需要，使用 ID 为元素声明样式将很难覆盖它们。

您可以在以下页面找到更多关于特异性的信息

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://css-tricks.com/specifics-on-css-specificity/

实施例

＆＃13;

html {
  height: 100%;
}
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/background2.jpg);
  background-size: cover;
}
.backgroundCover {
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.4;
}
.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  float: left;
  background-color: black;
}

＆＃13;

<!doctype html>
<html>

<head>
  <title>Noam's Website</title>
  <link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>
  <div class="backgroundCover"></div>
  <div class="sideBar"></div>
</body>

</html>

＆＃13;

Answer 2

您已将宽度设为100％。所以它重叠在另一个上面。给它填充左边50px。看看https://jsfiddle.net/vyt18hh5/

<!doctype html>
<html>
<head>
    <title>Noam's Website</title>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
  <div id="sideBar"></div>
  <div id="backgroundCover"></div>
</body>
</html>

html{
height: 100%;
}
body{
margin: 0;
width: 100%;
height: 100%;
background-image: url(images/background2.jpg);
background-size: cover;
}
#backgroundCover{
height: 100%;
background-color: blue;
z-index:1;
padding-left:50px;
}
#sideBar{
width: 50px;
height: 100%;
float: left;
background-color: black;
z-index:2;
}

我的div不会出现，但其他人会

2 个答案:

实施例