在这里,我尝试创建浏览器选项卡。
.intrnlTabs {
background: #f0f1f3;
height: 35px
}
.intrnlTab {
background: #e7e9ec;
display: inline-block;
height: 30px;
text-align: left;
margin-top: 5px;
line-height: 35px;
border-top-left-radius: 10px;
position: relative;
margin-left: 12px
}
.intrnlTxt {
display: inline-block;
max-width: 150px;
height: inherit;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-width: 30px;
padding: 0 20px 0 10px
}
.intrnlCls {
position: absolute;
right: -23px;
height: inherit;
background: #dee1e5;
box-sizing: border-box;
top: 0;
width: 33px;
transform: skewX(30deg);
border-top-right-radius: 5px;
cursor: pointer;
display: inline-block;
text-align: center
}
.intrnlCls:hover {
background: #d7d8d8
}
.intrnlClsicon {
transform: skewX(-30deg);
display: inline-block
}
输出我得到的
输出我所期望的
我希望新添加的选项卡标题应该在前一个选项卡后面而不添加 z-index 值。我已经实现了添加 z-index 值。但是,我不想添加 z-index 值。
最佳答案
您不需要为每个元素计算特定 z-index,或通过 JS 开始分配它。
为这些“X”元素添加 1 的 z-index 已经足以实现您想要的:
.intrnlCls { z-index:1; }
关于css 新创建的 div 应该落后于以前的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54884939/