css - 将较大的孩子置于父母之上或之上？

Question

我现在拥有的是这个页面。

我希望部分标题栏“雇主信息”比它自然宽 40 像素，脱离其父级，如图所示。

到目前为止，我尝试过：

.content form ol {
    position: relative;
    z-index: 50;
}

.content form ol .section {
    position: absolute;
    left: -20px;
    width: 110%;
    z-index: 100;
}

并尝试了其他几个父元素位置：相对，但它从来没有奏效。

任何的想法？谢谢！

Answer 1

你的main班级有overflow: hidden，所以它掩盖了它之外的部分。overflow: visible用on试试你的代码.main。

也使用position: relativein .section，否则它将脱离自然流，其余内容会跳到它后面。

Answer 2

正如“freejost”所说，overflow:hidden在类中删除main并添加样式position:relativeli

IE

#submit_form li{
position:relative;
}
#empInfo {
left: 0;
position: absolute;
right: -20px;
top: 0;
}

HTML编辑是：

<div id="empInfo" class="description section" >
<h2>Employer Information</h2>
<div>General information regarding the employer business or organization.</div>
</div>

这应该可以解决它..您必须进行一些其他编辑才能使其正常工作，但这应该让您处于舒适的水平