At the moment, your absolutely positioned elements are positioned relative to the transformed element since it establishes a new local coordinate system (see https://www.w3.org/TR/css3-transforms/#transform-rendering)
and none of the other near by parents do.
So unlike what you think, the yellow bar on top of orange bar is not hidden by blue bar overlapping it. It's not visible on top of orange bar because all the yellow bars are actually at the top of the blue bar, since they are positioned relative to the transformed parent.
The moment you apply draggable(), the immediate parent <div> of these bars gets position:relative (establishing a new coordinate system) hence the bars positions relative to them, which is why orange box's top bar appears on top of it (till now it was on top of the transformed parent).
From what I understood you want the box on top to hide the bar of the box below it, which can be achieved by giving the bars a lower z-index and setting a high z-index via the zIndex property of draggable. This property sets an z-index only while the item is being dragged. Hence the lower z-index we applied to bars won't affect during dragging. As soon as we finish dragging and draggable loses this higher z-index, the lower z-index of the bar takes effect.
You can test this by overlapping the orange box with the blue box in demo.
$(document).ready(function() {
$('.draggable').draggable({
zIndex: 1
})
});
#container {
transform-style: preserve-3d;
transform: translateY(20px);
}
.draggable {
width: 90px;
height: 90px;
}
img {
width: 90px;
height: 90px;
transform: translate3d(0, 0, 50px)
}
.bar {
position: absolute;
top: -10px;
width: 90px;
height: 10px;
z-index: -1;
background-color: yellow;
transform: translate3d(0, 0, 25px)
}
#blue img {
background-color: blue;
}
#orange img {
background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="container">
<div id="blue" class="draggable">
<div class="bar"></div>
<img>
</div>
<div id="orange" class="draggable">
<div class="bar"></div>
<img>
</div>
</div>
