如何让溢出父容器的<div>元素保持可见？卡牌交互场景问题

问题描述 #

我正在为一款卡牌游戏开发手牌控制台，选中卡牌时希望它向上移动（高于其他卡牌），但目前选中的卡牌一旦移出.card-recess容器边界就会被截断，怎么让卡牌在父容器外保持可见？

HTML代码 #

<div class="hand-console-container">
    <div class="card-recess">
        <div class="card"></div>
        <div class="card selected-card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</div>

原始CSS代码 #

.hand-console-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10px;
    height: 300px;
    width: 90%;
    background-color: gray;
    border-style: solid;
    border-width: 2px;
    border-color: green;
    border-radius: 25px;
    box-shadow: 2px 2px 5px rgb(0, 255, 0), 2px 2px 5px rgb(0, 255, 0) inset;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    overflow-y: visible;
    overflow-x: auto;
}

.card-recess {
    /* position: relative; */
    background-color: rgb(99, 99, 99);
    border-style: solid;
    border-radius: 25px;
    border-width: 2px;
    border-color: black;
    box-shadow: inset 4px 4px 4px 4px black;
    width: 95%;
    height: 90%;
    display: flex;
    padding-left: 20px;
    padding-top: 15px;
}

.card {
    position: relative;
    float: left;
    height: 230px;
    width: 150px;
    margin-left: 10px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 3px black;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background-color: blue;
}

.selected-card {
    bottom: 100px;
}

解决方案 #

核心问题是父容器的默认裁剪行为导致卡牌超出部分被隐藏，只需调整以下两处即可解决：

• 给.card-recess添加overflow: visible，显式允许子元素超出容器范围显示
• 启用.card-recess的position: relative，确保选中卡牌的相对定位基于该容器，同时不限制子元素可见范围

另外可以清理一些无效样式（比如.card里的float: left，因为父容器是flex布局，float属性无效；还有.card里的align-items和justify-content，这些是flex容器的属性，.card不是flex容器，所以无作用）。

修改后的CSS代码 #

.hand-console-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10px;
    height: 300px;
    width: 90%;
    background-color: gray;
    border-style: solid;
    border-width: 2px;
    border-color: green;
    border-radius: 25px;
    box-shadow: 2px 2px 5px rgb(0, 255, 0), 2px 2px 5px rgb(0, 255, 0) inset;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    overflow-y: visible;
    overflow-x: auto;
}

.card-recess {
    position: relative;
    overflow: visible;
    background-color: rgb(99, 99, 99);
    border-style: solid;
    border-radius: 25px;
    border-width: 2px;
    border-color: black;
    box-shadow: inset 4px 4px 4px 4px black;
    width: 95%;
    height: 90%;
    display: flex;
    padding-left: 20px;
    padding-top: 15px;
}

.card {
    position: relative;
    height: 230px;
    width: 150px;
    margin-left: 10px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 3px black;
    z-index: 1000;
    background-color: blue;
}

.selected-card {
    bottom: 100px;
}

修改后，选中的卡牌向上移动时，超出.card-recess的部分会完整显示，不会被截断，同时保留原有布局的其他特性。

内容的提问来源于stack exchange，提问作者Blind Eye Studios