CSS3动画z-index上的图像不起作用[关闭]答案

【问题标题】：Image over CSS3 animation z-index not working [closed]CSS3动画z-index上的图像不起作用[关闭]
【发布时间】：2015-10-15 16:13:35
【问题描述】：

我想在我的 CSS3 动画上设置一个图像。所以我将z-index:55 用于动画图像，将z-index:56 用于顶部图像。但我做不到。

在这里，我想在我的电视中显示一些动画。所以用动画代替电视图像对我来说很重要。（对于我的响应问题，我避免使用图像作为背景）

【问题讨论】：

标签： css

【解决方案1】：

存在多个问题：

所以你的小提琴可以像这样更新：

.tv {
 position: relative;
 z-index: 100;
}

这会将漩涡置于背景中，但仍会溢出图像。这可以通过在电视上设置巨大的边框并用上/左偏移它来部分解决，但这有点傻

.tv {
    position: relative;
    z-index: 100;
    border: 200px solid #fff;
    top: -100px;
    left: -100px;
}

更好的解决方案是为电视图像添加白色背景。

【讨论】：

【解决方案2】：

z-index 仅适用于 CSS position 的元素。

【讨论】：

【解决方案3】：

将position 添加到电视元素。

根据w3s：

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

【讨论】：

【解决方案4】：

除了@Thaillie 答案：

z-index 仅适用于具有 as css 属性 position 的元素，但 position 值 static 除外。

示例：如果你会使用位置：静态；你不能使用z-index

【讨论】：