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;
    }

这些图像分别位于＃network_container_1内部，以＃block1，＃block2，＃block3等形式位于类中。如您所见，我试图弄乱z-index，但是它不起作用。

Answer 1

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

隐藏多个ID的溢出

1 个答案: