html - 将元素精确定位在 css 中的其他元素之上

Question

我有一些元素共享某些 CSS。现在我想要一个元素有一个覆盖它的 div，其中有一些文本。可以看一个例子here .目前它有点“猜测”到位，但您可以看到浏览器之间的差异，所以我怀疑让像素完全正确会改变任何事情。

目前，我获得它的方法是插入一个 <div>具有相同的属性，但它有很多重复代码并且并不完美。

这是 HTML:

<!-- regular non-locked element -->
<a href='#' class='level yellow'>
    <h1>Level 1</h1>
    <div class='score'>score</div>
    <h2>248</h2>
    <input type='text' value='20' class='dial' />
</a>

<!-- locked element -->
<div class='level yellow'>
    <h1>Level 1</h1>
    <div class='score'>score</div>
    <h2>0</h2>
    <input type='text' value='0' class='dial' />
    <div class='locked'><br /><br /><br />You still need to unlock this level!</div>
</div>

CSS:

.level {
    border-radius: 20px;
    -webkit-border-radius:20px;
    -moz-border-radius: 20px;
    width:150px;
    height:220px;
    padding:10px;
    border-width: 1px;
    border-style: solid;
    background-color:transparant;
    color:#8C9695;
    margin:15px auto 0px auto;
    cursor:pointer;
    position:relative;
    display:block;
    text-decoration:none;
    transition: background-color 0.3s, color 0.3s;
    -webkit-transition: background-color 0.3s, color 0.3s;
    text-align:center;
}
.level:hover:not(> .locked){
    color: white;
}
.locked {
    background-color:rgb(0, 0, 0);
    background-color:rgba(0, 0, 0, 0.8);
    width:172px;
    height:242px;
    position:relative;
    top:-135px;
    left:-10px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    z-index:20;
    cursor:default;
    transition:0.3s;
    color:transparent;
    text-align:center;
}
.locked:hover{
    color:white;
}

Answer 1

您可以通过使用 position:absolute 和 将底层元素 position:relative 和覆盖元素作为其子元素来将元素精确地放置在彼此之上top, right, bottom, left 属性都为 0。例如:

.level {
    position:relative;
}

.locked {
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    background-color:rgb(0, 0, 0);
    background-color:rgba(0, 0, 0, 0.8);
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    z-index:20;
    cursor:default;
    transition:0.3s;
    color:transparent;
    text-align:center;
}