给伪类设置z-index= -1;
2024-08-24 06:03:28
.column{
position: relative;
float: left;
padding: 30px 0;
width: 25%;
z-index: 0;
background-color: orange;
text-align: center;
} .button:before,.button:after{
content: '';
position: absolute;
} .button:before{
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
z-index:-1;
border-radius: 9px;
} .button.red:before{
background: #d02e17;
background-image: linear-gradient(to bottom, #b32511, #ffffff); } .button {
display: inline-block;
position: relative;
height: 33px;
line-height: 33px;
background-image: linear-gradient(to bottom,#e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
border: #000000 1px dotted;
box-shadow: 0 2px 1px rgba(0,0,0,0.25);
}
其中将.button:before 的z-index = -1;是因为.button 和.button的伪类(新加的一个Box)为同一级的,而.button 默认为0,修改其中的z-index其实修改的是子元素的z-Index,所以无论怎样修改,.button中的元素也会在伪类的下面,因此只能修改伪类的z-index; 而将.column的z-index设为0,其实是postion为relative时,设置z-index,才会将其加入context-stack,
最新文章
- Linux 基本命令
- classpath路径和properties
- 12.PHP内核探索:PHP的FastCGI
- 区间k大数查询
- PKM(personal knowledge management)
- ios控制器modal跳转
- make file 详
- xbox360版本之分
- python性能优化
- ntp 时钟同步
- Linux常用命令(精选)
- Android源码解析——Toast
- 实现memmove函数
- 解决ADT大量出现";Unexpected value from nativeGetEnabledTags: 0";的问题
- Javascript高级编程学习笔记(95)—— WebGL(1) 类型化数组
- ./runInstaller: Permission denied
- 【托业】【跨栏】TEST05
- AES/CBC/PKCS7Padding加密方式
- ipv6禁用导致rpcbind服务启动失败解决办法
- kudu 存储引擎简析