css - 如何防止 fieldset 的边框穿过 form 标签包围的图例元素？

Question

我有一个带有这些标签的表单:<form>, <fieldset> and <legend> .

字段集的边框穿过图例元素的中间。我仍然希望我的表格周围有边框，但我不想穿过它的中间。问题是这样的:如果我只在 css 中尝试字段集和图例，一切正常，但如果我还添加表单样式，我会得到我正在谈论的错误。

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-height: 50px;
  padding: 5px;
  margin: 10px;
  clear: both;
  float: left;
  width: 40%;
  text-align: left;
  border: 0px;
}
fieldset {
  padding: 10px;
  margin: 2px;
  border: 1px solid #000000;
  width: 60%;
}
legend {
  padding: 0px;
  border: 0px;
  color: #ff0000;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
}

<form>
  <fieldset>
    <legend>Title</legend>
  </fieldset>
</form>

我猜这是表单和字段集/图例样式之间的冲突。我添加 position: absolute; 的原因translate 方法是将表单定位在浏览器页面的中间。那么，如何摆脱图例中间的边框字段集，但仍将我的表单定位在页面中央？

Answer 1

形成图例{ position:relative; z-index:2