<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
*{margin:0;padding:0}
div{width:50%;padding:20px;border:5px solid green}
#box1{position:relative}
#box4{position:absolute;display:none;border-color:red}
</style>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4"></div>
</div>
</div>
</div>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
<script>
var $box3 = $('#box3')
var $box4 = $('#box4')
$box4.css({visibility:'hidden',display:'block'}) var $box = $box4.offsetParent()
// or
var $box = $(document.getElementById('box4').offsetParent) $box4.css({visibility:'',display:'none'})
var offset1 = $box3.offset()
var offset2 = $box.offset()
$box4.css({
top: offset1.top + $box4.outerHeight() - parseInt($box.css('border-top-width'), 10) - offset2.top,
left: offset1.left - parseInt($box.css('border-left-width'), 10) - offset2.left,
display: 'block'
})
</script>
</body>
</html>