javascript - 祖父母要素に基づいて div の左の値を設定する

Question

相対 div 内にネストされた絶対 div があります。絶対 div の左の値を祖父母の位置に対して相対的にしたいが、その高さを親要素に対して相対的にすることを許可します。ページは次のとおりです: http://pixeloft.com/clients/supportcenter/facilitators/

クリックすると、バイオ要素の左の値が常に最初の「フランク・アブデール」の左の値になるようにします。

jsを介してdivの左の値を設定することでこれは可能ですか?

ここに私のコードがあります: http://jsfiddle.net/6RQ3u/

HTML:

    <div class="person">
    <div class="person-info">   <a class="showBio" target="1">
    <h4>Name 1</h4></a>

        <div class="arrow" id="arrow-1">^</div>
    </div>
    <div class="bio-wrapper">
        <div class="bio" id="bio-box-1"><a class="hideBio" target="1">X</a>Bio</div>
    </div>
</div>
<div class="person">
    <div class="person-info">   <a class="showBio" target="2">
    <h4>Name 2</h4></a>

        <div class="arrow" id="arrow-2">^</div>
    </div>
    <div class="bio-wrapper">
        <div class="bio" id="bio-box-2"><a class="hideBio" target="2">X</a>Bio</div>
    </div>
</div>
<div class="person">
    <div class="person-info">   <a class="showBio" target="3">
    <h4>Name 3</h4></a>

        <div class="arrow" id="arrow-3">^</div>
    </div>
    <div class="bio-wrapper">
        <div class="bio" id="bio-box-3"><a class="hideBio" target="3">X</a>Bio</div>
    </div>
</div>

CSS:

.person a h4 {
    color: #000;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    width: 100px;
}
.bio {
    border-top: 18px solid #387496;
    position:absolute;
    width:618px!important;
    float:left;
    background-color:#d8edf4;
    padding:15px 170px;
    top:284px;
    left:-19px;
    display:none;
    z-index:200;
    clear: both;
}
.person {
    width:164px;
    margin-right:20px;
    float:left;
    display:inline;
    margin-bottom:30px;
    position: relative;
}
.person-info {
    float:left;
}
.showBio {
    float:left;
}
.hideBio {
    float:right;
    color:#fff!important;
    font-size:11px;
    position: absolute;
    right: 10px;
    top: -14px;
}
.arrow {
    display:none;
    background: url('images/bio-arrow.jpg') no-repeat -2px -6px #fff;
    float: left;
    display: block;
    clear: both;
    width: 30px;
    height: 15px;
    text-indent: -3000px;
}
a{cursor:pointer;}

JQuery:

jQuery(function () {
    jQuery('.bio').hide();
    jQuery('.arrow').hide();
    jQuery('.showBio').click(function () {
        jQuery('.bio').hide();
        jQuery('.arrow').hide();
        jQuery('#bio-box-' + $(this).attr('target')).slideToggle('fast');
        jQuery('#arrow-' + $(this).attr('target')).slideToggle('fast');
    });
    jQuery('.hideBio').click(function () {
        jQuery('#bio-box-' + $(this).attr('target')).slideToggle('slow');
        jQuery('#arrow-' + $(this).attr('target')).slideUp();
    });

});

ご助力いただきありがとうございます！