asp.net中如何让label相对于图片定位，而不是相对于页面定位，或者放在啥容器里，不因为位置变化而改变

Posted 2023-05-06

参考技术A 元素的定位都是取决于上级元素，但上级元素若没有定义 position (默认为position: static)，那么就一直向上查找，直到找到被定义了 position 的上级元素或最终找到 body 元素，就以此上级元素为参考来定位自身位置。
以上规则是对于 position: absolute 来说的，position: relative 总是遵循父级元素。

你的问题，设置了 div 的高度为 19，但显示出来比 19 高，唯一的可能性是此 div 的 style 中包含 padding 或 border。这是大家经常犯的一个错误。

一个 div 的真实高度 = height + padding-top + padding-bottom + border-top + border-bottom

<div style="height: 50px; padding: 10px; border: 5px;"></div>
这个 div 的高度其实是 50 + 10 + 10 + 5 + 5 = 80px

所以要设置高度为 50px ，要写成 height: 20px; padding: 10px; border: 5px;
追问

请不要在网上copy

参考技术B 用<div></div>把label装起来，再设置div的布局方式，div就相当于一个容器。再或者用
<table>
<tr>
<td>
这里放图片
</td>
<td>
这里放label
</td>
</tr>
</table>这样的一行两列的表格装图片跟label，不就可以设置label的位置了吗？追问

我是要把label放在图片上面 定在图片的某一位置 图片位置改变label也跟着改变

参考技术C javascript + css本回答被提问者采纳

让一个元素相对于父元素固定定位

之前在项目中，遇到了一个场景，需要实现相对于父元素的fixed定位：在父元素内拖动滚动条时，"fixed"定位的元素不能滑动，在外层拖动滚动条时，父元素及父元素内的所有元素跟着一起滑动。但是position: fixed是相对于窗口进行的定位，不能直接实现我们需要的效果。

 

我们想让特定子元素相对于父元素"fixed"定位，也就是说，剩余的子元素不定位。那我们可以分开来想，如果添加一个祖先元素assistor，有两个祖先元素，一个用于辅助定位，一个用于包裹不定位的内容，这个问题不就解决了吗。像这样

 

实质上是child相对于assistorabsolute定位，parent内的内容自己负责展示。只要assistor和parent一样大，看起来就像是子元素child相对于父元素parent固定定位了。具体原理是position: absolute;的元素会相对于第一个设置了position: relative;的祖先元素进行定位，我们将assistor设置为position: reletive;，滚动条是在parent中的，这样"fixed"定位和parent内的内容滚动就都实现了。

 

<div class="assistor">
  <div class="parent">
    <div class="child"></div>
    <div class="placeholder"></div>
  </div>
</div>

　　

 

.assistor {
  position: relative; /*关键点*/
  display: block;
  width: 500px;
  height: 300px;
  margin: 100px auto 0 auto;
  background-color: #ddd;
}
.parent {
  width: 500px;
  height: 300px;
  background-color: #888;
  overflow: auto; /*关键点*/
}
.child {
  position: absolute; /*关键点*/
  width: 120px;
  height: 120px;
  margin: 100px 50px;
  background-color: #333;
}
.placeholder {
  width: 1000px;
  height: 1000px;
}