Div没有显示css

Question

我找不到我的问题：

body {
  position: relative;
}
#content {
  position: relative;
}
#overlay {
  position: absolute;
  z-index: 10;
  width: 500px;
  height: 150px;
  top: 215px;
}
#callAction {
  position: absolute;
  z-index: 1;
  display: inline-block;
  padding: 38px 110px;
}

<div id="content">
  <div id="overlay">
    <a id="callAction">Button<a>
        </div>
    </div>

a-tag的CSS有效，但不是id为#overlay的div-tag的css。 这里有什么问题？？

Answer 1

这是我制作的JSFIDDLE示例。我无法清楚地理解你的问题，但是根据评论，我认为你想把你的按钮放在#overlay div的中间。

在#callaction的CSS中，我刚添加了顶部和左侧以使其保持居中。

#callAction {
    position: absolute;
    z-index: 1;
    display: inline-block;
    padding: 38px 110px;
    border: 2px solid black;
    top: 20%;
    left: 20%;
}

随意编辑这个小提琴让我知道您的确切问题。

您也知道您的<a>标记未关闭。

修改

从下面的评论中，我了解用户需要一个名为container的包装器div，它具有一些高度：在他的情况下，页面的全高和宽度。然后他有#overlay div他需要放置＆＃34;亲戚＆＃34;到父div。

问题是，当你创建#overlay div＆＃34; absolute＆＃34;时，它不再是公共布局，而是放在布局之外。阅读CSS定位here。

所以你需要做的就是不要让孩子成为绝对的。让他们相对。就像这个fiddle。

编辑2：

最后一个问题是wrong comment语法。有关评论，请参阅here。