溢出自动不使用绝对位置

Question

在下面的代码中，

1. 我有一个父div（.parent）和三个子div（.child1、.child2、.child3）

要求-

1. 。儿童2应该重叠。儿童3
2. 。child2应该可以水平滚动

问题-

使用绝对位置设置overflow-x不起作用。

如何使此表可滚动，以及使其与下面的所有div重叠？

企图-

$('#expand').click(function(){
    $('.child2').toggle()
});

.child2{
    /* position: absolute;
    z-index: 2; */
    overflow-x: auto;
}

.child3 {
    position: absolute;
    z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="parent">
    <div class="child1" style="background-color: aqua; width: 50%;">
        <button id="expand">EXPAND</button>
    </div>
    <div class="child2" style="display: none;">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>MarkMarkMarkMarkMarkMarkMark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="child3" style="background-color: coral; width: 50%;">
        CHILD3
    </div>
</div>

Answer 1

overflow-x不起作用，除非出于某种原因，您有一个宽度。如果元素不是绝对定位的，则默认宽度为auto，但是，当元素绝对定位时，它会稍微出错，并且会占用它所需的所有宽度，不会提出任何问题。

因此，您可以通过将宽度：100%添加到您的。

$('#expand').click(function(){
    $('.child2').toggle()
});

.child2{
    position: absolute;
    z-index: 2;
    overflow-x: auto;
    width: 100%;
}

.child3 {
    position: absolute;
    z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="parent">
    <div class="child1" style="background-color: aqua; width: 50%;">
        <button id="expand">EXPAND</button>
    </div>
    <div class="child2" style="display: none;">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>MarkMarkMarkMarkMarkMarkMark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="child3" style="background-color: coral; width: 50%;">
        CHILD3
    </div>
</div>