如何使用 .offset() 或 .position() 动态设置元素的位置

Question

我正在尝试将两个 div 的位置设置为表格单元格的最顶部和最底部，以便可以选择它们用于调整大小功能。但是，我的应用程序的一部分涉及跨表行的用户（如 sn-p 中所示）。是否可以将调整大小的 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;。只要包含元素也是定位元素，这些应该可以工作。

您可以通过将父/容器/祖先元素设置为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，尽管您可能已经排除了这种可能性。