html - z-index 不适用于浮动 div

Question

我有这样的结构：

<div class='row'>
    <div class='cell'>aaaa</div>
    <div class='cell'>bbbb</div>
    <div class='cell'>cccc</div>
</div>
<div class='row'>
    <div class='cell'>dddd</div>
    <div class='cell'>eeee</div>
    <div class='cell'>ffff</div>
</div>

与相关的样式表：

.cell {
    z-index: 1;
    position: relative;
    float: left;
    width: 82px;
}

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
}

row {
    clear: left;
    position: relative;
    z-index: 1;
}

我只想将光标上方的 div 调整大小，保持固定 div 其余部分的结构。谢谢！

Answer 1

您需要将类用于row.

如果您将 css 中的课程从更改row为.row：

现场演示

类必须以.eg开头.anyname

类（在 HTML 中）在 css<div class="james"></div>中访问.james

ID（在 html 中）在 CSS<div id="james"></div>中访问#james

Answer 2

尝试在悬停的单元格（100-82=18）上设置 -18px 的负右边距：

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
    margin-right: -18px;
}

工作示例