CSS中
img标签z-index不生效可能由多种原因导致，以下是不同情况的解决办法：
- **父元素position
属性问题**：若两个想要重叠的设置z-index的
img标签的父元素的position为relative，子元素（
img标签）的z-index会失效。此时应将父元素的position设置为absolute或保持默认的static。例如：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<
style>
/* 父元素设置为absolute */
.parent {
position: absolute;
}
img {
position: relative;
z-index: 1;
}
</
style>
</head>
<body>
<div class="parent">
<
img src="example
.jpg">
</div>
</body>
</html>
```
- **
img标签自身position
属性问题**：若
img标签本身的position为static，其z-index会失效。应将
img标签的position设置为relative、absolute或fixed其中的一种。示例如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<
style>
img {
/* 设置为relative */
position: relative;
z-index: 2;
}
</
style>
</head>
<body>
<
img src="example
.jpg">
</body>
</html>
```
- **浮动
属性问题**：若
img标签同时设置了float浮动，其z-index会失效。应
去掉img标签的浮动
属性float，改为display: inline-block。代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<
style>
img {
/*
去掉浮动，改为inline-block */
display: inline-block;
position: relative;
z-index: 3;
}
</
style>
</head>
<body>
<
img src="example
.jpg">
</body>
</html>
```
- **Safari浏览器3D transform问题**：在Safari浏览器（包括iOS的Safari、iPhone上的微信浏览器以及Mac OS X系统的Safari浏览器）下，使用3D transform变换时，如果祖先元素没有overflow:hidden/scroll/auto等限制，会忽略z-index层叠顺序设置。此时可给祖先元素添加overflow:hidden/scroll/auto等限制。示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<
style>
.ancestor {
/* 添加overflow限制 */
overflow: hidden;
}
.bar {
height: 30px;
background-color: #cd0000;
position: fixed;
left: 0;
right: 0;
top: 120px;
z-index: 99;
}
.box {
text-align: center;
}
.rotate {
transform: perspective(300px) rotateY(40deg);
}
</
style>
</head>
<body>
<div class="ancestor">
<div class="bar"></div>
<div class="box">
<
img class="rotate" src="mm1
.jpg">
</div>
</div>
</body>
</html>
```
本文介绍了一种使用JavaScript处理HTML中img标签的方法，通过正则表达式匹配并移除特定的style属性，实现了对图片样式的动态控制。
扫一扫
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
