How to make elements disappear under parent <div> border

Question

I wish to achieve this effect:

where a draggable will disappear below the edges of the container div.

I am not sure in which direction to head. At first I thought I should use css z-index but so far unsuccessful. Is there a simple way to achieve it ? I intend to use it with jsPlumb but I don't think my question is limited to this library.

Here is a snippet with the problem. The blue rectangle is draggable, the grey area is my container, and the orange is the full page.

jsPlumb.bind("ready", function() {
  jsPlumb.setContainer("conteneur");
    
  jsPlumb.draggable(document.getElementById("item1"),{
  });
    console.log(document.getElementById("item1"));
});

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

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

Answer 1

If I'm understanding your question:

#conteneur {
  overflow: hidden;
}

should do the trick.