Question

我有一些共享某些css的元素。现在我希望一个元素有一个覆盖div，上面有一些文本。可以看到一个例子here。目前它已经猜到了＃39;在适当的位置，但你可以看到浏览器之间的差异，所以我怀疑完全正确的像素会改变任何东西。

目前，我的方法是插入具有相同属性的<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:relative和position:absolute，top，{right，bottom和left，将基础元素0和覆盖元素作为其子元素，将元素精确地放在彼此之上。 {1}}，.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; }属性全部为{{1}}。例如：

{{1}}

Answer 2

嗯，你只需要一个元素 - 只需隐藏/取消隐藏被锁定的div，或者将普通元素的类更改为锁定类，或者将一个元素淡入另一个元素或....

总之，有很多方法可以做到这一点。

定位元素恰好位于css中的其他元素上

2 个答案: