Html 无法将元素保留在父元素内

使用CSS，如何将元素保持在其父元素内。我创建了一个DIV，并在其中放置了一个HR标签和两个组合框

人力资源标签在部门外。请检查此项

---

将

position:relative

添加到父分区。绝对位置是相对于文档的，除非位于具有相对位置的元素内

这里是新代码：-我在容器中添加了

position:relative

，这意味着包含所有绝对定位的子项

<div style="width:70%; border:solid;position:relative">
  <hr style="position:absolute;width:100%;z-index:-1;" /> Option One
  <select style="margin-right:50px">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <span></span> Option Two
  <select>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

选项一
A.
B
C
选择二
A.
B
C

h2 {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #000;
  line-height: 0.1em;
  margin: 10px 0 20px;
}

h2 span {
  background: #fff;
  padding: 0 10px;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border-top-color: #ccc;
  border-top: 1px solid #eee;
}

<div style="width:70%; border:solid;position:relative">
  <hr style="position:absolute;width:100%;z-index:-1;" /> Option One
  <select style="margin-right:50px">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <span></span> Option Two
  <select>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>