隐藏多个ID的溢出

Question

我想创建一个包含网络图的网站。为此，我使用了 vis.js。如果你将鼠标悬停在一个人的图像上，图像应该翻转并在背景上显示一些信息。我创建了一个 JavaScript 文件，该文件动态地从 json 文件中创建了一棵树。这是结果的图片：

如您所见，图像在框外可见，但事实并非如此。它们不应显示在边框之外。

这是我的 html-代码：

<div id="fullpage">
<div class="section " id="section0">
    ...
</div>
<div class="section" id="section1">
    ...
</div>
<div class="section" id="section2">
    <div class="intro">
    ...
    </div>
    <div id="media">
    ...
    </div>
</div>
<div class="section active" id="section3">
    <div class="slide" id="slide1">
        <div id="network_container_1">
            <div id="network"></div>
        </div>
    </div>
    <div class="slide active" id="slide2">
        <div id="network_container_2">
        </div>
    </div>
</div>

这里是 CSS:

    #network{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        
    }
    #network_container_bewohner{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border:1px black solid;
    }

    #network_container_freunde{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .overlay {
        position: absolute;
        padding: 4px;
        z-index: 0;
    }

    #slide1{
        z-index:0;
    }
    #slide2{
        z-index:1;
    }

图像位于#block1、#block2、#block3 等，class 覆盖在#network_container_1 内。如您所见，我试图弄乱 z-index 但它不起作用。

Answer 1

好的，我找到了解决方案。问题是绝对位置。看这里：Position absolute and overflow hidden

隐藏多个ID的溢出

Hide Overflow of multiple IDs

html

javascript

css

vis.js