父元素溢出对于不同的子元素有不同的行为？

Question

我无法让一个孩子覆盖父母溢出，但不能让另一个孩子覆盖

#second-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0px;
    height: 503px;
}

.inv {
    border: 1px solid rgb(37, 37, 37);
    height: 120px;
    width: 120px;
    margin: 2px;
    background: rgba(65, 65, 65, 0.8);
    border-radius: 5px;
    position: relative;
}

.draggable-item {
    position: absolute;
    width: 120px;
    height: 120px;
    display: block;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
    overflow: hidden;
}

second-row 是父元素，inv 是插槽，是不应覆盖溢出的子元素，draggable-item 是应覆盖溢出的项目。所以我希望draggable-item能够覆盖第二行溢出，但不覆盖inv。

提前致谢:)

Answer 1

要允许draggable-item覆盖第二行的溢出，同时确保inv插槽不覆盖，您可以使用CSS属性的组合，包括overflow:visible（对于draggable-item）和overflow:hidden（对于inv）。此设置确保draggable-item可以超出第二行的边界，但inv将被限制在其边界内。

#second-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0px;
    height: 503px;
    position: relative; /* Ensure the parent is a containing block */
    overflow: hidden; /* Ensure the second-row has hidden overflow */
}

.inv {
    border: 1px solid rgb(37, 37, 37);
    height: 120px;
    width: 120px;
    margin: 2px;
    background: rgba(65, 65, 65, 0.8);
    border-radius: 5px;
    position: relative; /* Ensure inv respects the parent's overflow */
    overflow: hidden; /* Prevent inv from overriding the overflow */
}

.draggable-item {
    position: absolute;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
    overflow: visible; /* Allow draggable-item to override overflow */
}