如何使元素在父<div>边框下消失

时间:2015-11-24 16:23:36

标签: javascript html css html5 jsplumb

我希望达到这个效果:

enter image description here

其中draggable将在容器div的边缘下方消失。

我不确定要朝哪个方向前进。起初我以为我应该使用css z-index,但到目前为止还不成功。 有没有一种简单的方法来实现它?我打算将它与jsPlumb一起使用,但我不认为我的问题仅限于此库。

这是一个有问题的片段。蓝色矩形是可拖动的,灰色区域是我的容器,橙色是整页。

&#13;
&#13;
jsPlumb.bind("ready", function() {
  jsPlumb.setContainer("conteneur");
    
  jsPlumb.draggable(document.getElementById("item1"),{
  });
    console.log(document.getElementById("item1"));
});
&#13;
#master {
    background: orange;
    position: relative;
    z-index: 21;
    padding: 20px;
}
#conteneur {
   padding: 20px;
   width:80%; 
   height: 200px;
   border: 1px solid gray;
   position: relative;
   background: grey;
   z-index:21;
}

#item1 {
   left: 100px;
   z-index: 12;
}

.node{
    background: blue;
   position: absolute;
   width:20px;
   height:30px;
}
&#13;
<script src="https://rawgit.com/sporritt/jsPlumb/master/dist/js/jsPlumb-2.0.4-min.js"></script>
<div id="master">
   <div id="conteneur" class="cont">
       <div id="item1" class="node"></div>
       
   </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

如果我理解你的问题:

#conteneur {
  overflow: hidden;
}

应该这样做。