Offset Overlapping Elements

by blowsie

HTML

<table>
                    <tr>
                        <td>Label 7</td>
                        <td>  <div class="related-wrap">  <div class="related"> field7 related</div>field7</div></td>
                    </tr>
                    <tr>
                        <td>Label 8</td>
                        <td> <div class="field">  <div class="related">field8 related</div>field8</div></td>
                    </tr>
                </table>

CSS

.writer, .form, .subform, .group, .field {background: rgba(200, 54, 54, 0.2); border:1px dotted #fff; position:relative
}
.related-wrap {position:relative}
.writer {position:relative; margin-left:200px;}
.related{ position:absolute;  background: rgba(12, 24, 36, 0.2); top:0; bottom:0;}

.subform .related{border-left:3px solid green;}
.group .related{border-left:3px solid blue;}
.field .related{border-left:3px solid yellow;}

JavaScript

//$('.related').each(function(){
//var pheight = $(this).parent().height()
//$(this).height(pheight);
//
//})
$('.related').offset({left: 30})