html - 将子内容定位在父容器之外

Question

我试图在视觉上将 DIV(文章标题)定位在其父 DIV(文章)容器之外。这可能吗？

我的标记示例在此处可用 - http://codepen.io/calebo/pen/CGoyD

Answer 1

试试这个:

.main {
  background: tomato;
  float: left;
  width: 600px;
  margin-top: 30px;        /* above Layout adjustment */
  /* removed overflow: hidden; */
  /* use always clearfix method instead */
}
.article_header {
  background: SteelBlue;
  color: #fff;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;  /* to neutralize padding of parent container */
  left: -10px;          /* to neutralize padding of parent container */
  padding: 10px;        /* to neutralize padding of parent container */
  right: -330px;        /* to neutralize padding of parent container */
}
.main > article{
  position: relative;
}
.aside {
  background: cyan;
  float: right;
  width: 300px;
  margin-top: 30px;        /* above Layout adjustment */
}

Working Codepen

要进行调整，请使用 margin 属性。