如何使元素在父 <div> 边框下消失
How to make elements disappear under parent <div> border
我想实现这个效果:
可拖动对象将消失在容器边缘下方 div。
我不确定该往哪个方向走。起初我想我应该使用 css z-index 但到目前为止没有成功。
有没有简单的方法来实现它?我打算将它与 jsPlumb 一起使用,但我认为我的问题不限于此库。
这是有问题的片段。蓝色矩形是可拖动的,灰色区域是我的容器,橙色是整页。
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>
如果我理解你的问题:
#conteneur {
overflow: hidden;
}
应该可以解决问题。
我想实现这个效果:
可拖动对象将消失在容器边缘下方 div。
我不确定该往哪个方向走。起初我想我应该使用 css z-index 但到目前为止没有成功。 有没有简单的方法来实现它?我打算将它与 jsPlumb 一起使用,但我认为我的问题不限于此库。
这是有问题的片段。蓝色矩形是可拖动的,灰色区域是我的容器,橙色是整页。
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>
如果我理解你的问题:
#conteneur {
overflow: hidden;
}
应该可以解决问题。