html - Z-index 适用于静态位置,为什么?
问题描述
我一直认为 z-index 不适用于 position static,但这并不完全正确,您可以在Codepen上打开我的示例并尝试取消注释 z-index,然后观察悬停时元素的行为。如果您想查看错误,您必须将鼠标悬停在第一行的元素上。有人解释这种行为吗?
.container {
display: grid;
justify-content: center;
grid-template-columns: repeat(2, 210px);
}
.card {
width: 200px;
padding: 5px;
margin: 5px;
transition: 1s;
}
.card:hover {
z-index: -1;
background: cyan;
transform: scale(1.2);
}
.card__img {
width: 200px;
border-radius: 50%;
}
.card__p {
padding: 5px;
}
<div class="container">
<div class="card">
<img
src="https://static3.depositphotos.com/1000992/133/i/950/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"
class="card__img"
alt=""
>
<p class="card__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="card">
<img
src="https://static3.depositphotos.com/1000992/133/i/950/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"
class="card__img"
alt=""
>
<p class="card__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="card">
<img
src="https://static3.depositphotos.com/1000992/133/i/950/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"
class="card__img"
alt=""
>
<p class="card__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="card">
<img
src="https://static3.depositphotos.com/1000992/133/i/950/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"
class="card__img"
alt=""
>
<p class="card__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="card">
<img
src="https://static3.depositphotos.com/1000992/133/i/950/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"
class="card__img"
alt=""
>
<p class="card__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="card">
<img
src="https://static3.depositphotos.com/1000992/133/i/950/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"
class="card__img"
alt=""
>
<p class="card__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
解决方案
推荐阅读
- python - 出现错误 AttributeError: 'bool' 对象在尝试拟合机器学习模型时没有属性 'transpose'
- android - 无论设备在空间中的方向如何,如何计算设备的垂直运动?
- python - 如何在 Django v3 中测试相关模型
- ubuntu - taskserver:客户端连接握手失败
- javascript - 从用户输入中获取数字:提交时字符串为空?
- php - 字符编码错误 UTF-8 到 ISO 8859-1
- git - 如何在 git 中提交
- c - 如何在一个索引处将数组中的特定值设置为等于 C 中不同索引处另一个数组中的值
- laravel - 为什么 axios 不能从服务器响应中捕获错误?
- php - Composer 更新错误:安装 smatar/laravel-settings (1.3):正在下载(失败)。拉拉维尔