Question

我一直在尝试找到一种与常见的“粘在容器顶部”效果类似的方法，但我试图使它始终贴在容器的边界上，而不是顶部在同一个地方，但是当分辨率改变时，我一直在保持文本的移动：在Higher resolutions中，它停留在正确的位置，但是当resolution diminishes或得到way to high时，文本开始在容器周围跳舞。
为了澄清，我在容器中使用样式组件，在文本中使用inline-css，我已经尝试使用screen.size在屏幕尺寸更改时使用“ respons” css更改marginTop，但是似乎没有完全有效或对浏览器友好，并且阅读起来也真的很混乱，所以我希望有更好的方法可以做到这一点，如果这个问题看起来很愚蠢和/或已经被回答，我很抱歉，我已经搜索了很多关于它，但是没有找到适合上下文并且可以工作的任何东西。

.fieldset{
  width: 97%;
  margin: auto;
  background: #00000000;
  padding: 1%;
  border-radius: 5px;
  border: 3px solid gray;
  min-height: 50px;
}

.title{
  margin-top: -1rem;
  font-family: "Helvetica";
  color: "grey";
  background: "white";
  width: 10em;
}

<div class="fieldset">
<h3 class="title">
        Title
      </h3>
      <p>a</p>
</div>

Answer 1

您的填充正在更改，因此您无法控制它。如果您确实想要动态填充，则必须为每个元素（例如1vw）将其设置为相同的值，并且它们计算.title的位置，例如calc（-12px-1vw）;

.fieldset{
  width: 97%;
  margin: auto;
  background: #00000000;
  padding: 1vw;
  border-radius: 5px;
  border: 3px solid gray;
  min-height: 50px;
}

.title {
    margin: 0;
    position: relative;
    top: calc(-12px - 1vw);
    font-family: "Helvetica";
    width: 10em;
}

<div class="fieldset">
<h3 class="title">
        Title
      </h3>
      <p>a</p>
</div>

Answer 2

绝对定位

注意：父元素上的padding *需要调整。

.fieldset {
  margin: 2em 1%;
  background: #00000000;
  border-radius: 5px;
  border: 3px solid gray;
  min-height: 50px;
  position: relative;
}

.title {
  margin: 0;
  font-family: "Helvetica";
  color: "grey";
  background: "white";
  width: 10em;
  position: absolute'
 top:0;
  border: 1px solid red;
  transform: translateY(-50%);
}

<div class="fieldset">
  <h3 class="title">
    Title
  </h3>
  <p>a</p>
</div>

有没有一种方法可以使文本贴在div的“边框”上？

2 个答案: