.offset（）または.position（）を使用して要素の位置を動的に設定する方法

Question

2つのdivの位置をテーブルセルの最上部と最下部に設定しようとしています。サイズ変更機能しかし、私のアプリケーションの一部には、スニペットに描かれているように、テーブルの行にまたがるユーザーが関わっています。サイズ変更divの位置（北&南）を表のセルの上下にそれぞれ動的に設定できますか？こうすることで、ユーザーがテーブルの行にまたがっているときに、サイズ変更のdivが境界とともに移動します。

これは.offset（）または.position（）を使用して行うことができますか？どちらが正しいアプローチになるかわからない。私はこれがCSS単独ではできないと思います。しかし誰かが私を間違っていると証明できれば、私は提案をすることができます。

$('.appt-text').before("<div class='resize-north'></div>"); 
 
$('.appt-text').after("<div class='resize-south'></div>"); 
 
$('td').attr("align", "center"); 
 

 
$('.resize-south').on('mouseover', function() { 
 
    $(this).css('cursor', 's-resize'); 
 
}); 
 

 
$('.resize-north').on('mouseover', function() { 
 
    $(this).css('cursor', 'n-resize'); 
 
});

.resize-north { 
 
    border: 2px solid black; 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 1px; 
 
    z-index: 1000; 
 
} 
 

 
.resize-south { 
 
    border: 2px solid black; 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 1px; 
 
    z-index: 1000; 
 
} 
 

 
/* CSS code from here down is just for visualization */ 
 

 
.appt-text { 
 
    width: 100%; 
 
    max-width: 100px; 
 
    display: table-cell; 
 
    padding: 10px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    white-space: pre-wrap; 
 
    word-wrap: break-word; 
 
} 
 

 
td { 
 
    height: 100%; 
 
    width: 100px; 
 
    max-width: 100px; 
 
    max-height: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
td div { 
 
    max-width: 150px; 
 
    outline: none; 
 
} 
 

 
table { 
 
    border-collapse: separate !important; 
 
    border-top: 2px solid #4DC7E8; 
 
    border-left: 2px solid #4DC7E8; 
 
    margin: 0 auto; 
 
} 
 

 
tr td, th { 
 
    border-right: 2px solid #4DC7E8; 
 
    border-bottom: 2px solid #4DC7E8; 
 
} 
 

 
th { 
 
    width: 80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
      <thead> 
 
      <tr class="days-of-the-week"> 
 
       <th scope="col"></th> 
 
       <th scope="col">A</th> 
 
       <th scope="col">B</th> 
 
       <th scope="col">C</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <th scope="row" class="rowHdr">1</th> 
 
       <td class="cell" rowspan="2"><div contenteditable="true" class="appt-text"></div></td> 
 
       <td class="cell"><div contenteditable="true" class="appt-text"></div></td> 
 
       <td class="cell"><div contenteditable="true" class="appt-text"></div></td> 
 
      </tr> 
 
      <tr> 
 
       <th scope="row" class="rowHdr">2</th> 
 
       <td class="cell"><div contenteditable="true" class="appt-text"></div></td> 
 
       <td class="cell"><div contenteditable="true" class="appt-text"></div></td> 
 
      </tr> 
 
</table>

Answer 1

あなたはposition: absoluteとtop: 0px;またはbottom: 0px;を使用することをお勧めします。これらの要素は、包含要素も配置されている限り機能します。

parent/container/ancestor要素をposition: relativeに設定すると、これを行うことができます。以前の位置に比べて位置自体は変更されませんが、position: absolute要素を配置できる配置要素としてカウントされます。

以下は、これらの変更を加えたわずかに変更されたCSSです。あなたが説明したものに少し近づくはずです。

.resize-north { 
    border: 2px solid black; 
    position: absolute; /*<--*/ 
    display: inline-block; 
    top: 0px; /*<--*/ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    height: 1px; 
    z-index: 1000; 
} 

.resize-south { 
    border: 2px solid black; 
    position: absolute; /*<--*/ 
    display: inline-block; 
    bottom: 0px; /*<--*/ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    height: 1px; 
    z-index: 1000; 
} 


/* CSS code from here down is just for visualization */ 

.appt-text { 
    width: 100%; 
    max-width: 100px; 
    display: table-cell; 
    padding: 10px; 
    vertical-align: middle; 
    text-align: center; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    position: relative; /*<--*/ 
} 

td { 
    height: 100%; 
    width: 100px; 
    max-width: 100px; 
    max-height: 100px; 
    margin: 0; 
    padding: 0; 
    position: relative; /*<--*/ 
} 

td div { 
    max-width: 150px; 
    outline: none; 
    position: relative; /*<--*/ 
} 

table { 
    border-collapse: separate !important; 
    border-top: 2px solid #4DC7E8; 
    border-left: 2px solid #4DC7E8; 
    margin: 0 auto; 
    position: relative; /*<--*/ 
} 

tr td, 
th { 
    border-right: 2px solid #4DC7E8; 
    border-bottom: 2px solid #4DC7E8; 
} 

th { 
    width: 80px; 
} 

・ホープ、このことができますまたはあなたはそれをすでに除外しているかもしれませんが、少なくとも正しい方向にあなたをプッシュする...あなたはまた、flexboxに見てみたいことがあります。