Question

我有这个HTML标记：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
  <div id="panel">
    <div id="container"></div>
    <div id="container active"></div>
  </div>
</body>
</html>

我的想法是在我的文档中有一个或多个#panel，其中包含更多屏幕。在这种情况下，2 #container。具有#active ID的那个应该以不同的z-index级别显示。在这种情况下，我希望它在2级。

所以我在CSS中写了这个：

#panel {
  width: 50%;
  height: 500px;

  margin: 0;
  padding: 0;
  border: 1px solid red;

  box-sizing: border-box;
}

#container {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;

  height: 100%;
  width: 100%;

  background-color: green;
}

#container#active{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;

  height: 100%;
  width: 100%;

  background-color: yellow;

  z-index: 2;
}

我知道div个元素自动拥有display block属性，但我没有看到任何问题。

我还希望能够将display属性中的一个设置为none。

问题

此时，一切都没有发生。第二个元素甚至没有显示出来。虽然它们都在文档中并将height和width设置为100%。

问题

我如何制作它以便能够以一种有效的方式将所有这些元素叠加在一个#panel中？

JSFIDDLE

Answer 1

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

Basic html data types

所以你不能在id中使用空格。现在针对您的问题，您可以使用position:absolute，如下所示：

<强> HTML

<div id="panel">
    <div id="container"></div>
    <div id="activeContainer"></div>
</div>

<强> CSS

#panel {
    position: absolute;/*Add position absolute*/

    width: 50%;
    height: 500px;

    margin: 0;
    padding: 0;
    border: 1px solid red;
}

#container {
    position: absolute;/*Add position absolute*/
    top:0;/*Add top 0*/

    height: 100%;
    width: 100%;

    margin: 0;
    padding: 0;
    border: 0;

    box-sizing: border-box;
    z-index: 1;

    background-color: green;
}
#activeContainer {
    position: absolute;/*Add position absolute*/
    top: 0;/*Add top 0*/

    height: 100%;
    width: 100%;

    box-sizing: border-box;
    z-index: 2;

    background-color: yellow;
}

注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

JSFiddle

在CSS中堆叠元素并不像预期的那样工作

1 个答案: