将子内容定位在父容器之外 [英] Positioning child content outside of parent container

问题描述

我尝试在视觉上将DIV（文章标题）置于其父DIV（article）容器之外。这是否可能？

/ p>

我的标记示例位于此处 - http ：//codepen.io/calebo/pen/CGoyD

解决方案

尝试：

  .main {
 background：tomato; 
 float：left; 
 width：600px; 
 margin-top：30px; / *以上布局调整* / 
 / * removed overflow：hidden; * / 
 / *总是使用clearfix方法* / 
} 
 .article_header {
 background：SteelBlue; 
 color：#fff; 
 position：absolute; 
 bottom：100％; 
 margin-bottom：10px; / *中和父容器的填充* / 
 left：-10px; / *中和父容器的填充* / 
 padding：10px; / *中和父容器的填充* / 
 right：-330px; / *中和父容器的填充* / 
} 
 .main>文章{
 position：relative; 
} 
 .aside {
 background：cyan; 
 float：right; 
 width：300px; 
 margin-top：30px; / *以上版面调整* / 
} 
  

工作密码

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

I'm trying to visually position a DIV (article header) outside of it's parent DIV (article) container. Is this possible?

My mark-up example is available here - http://codepen.io/calebo/pen/CGoyD

解决方案

Try this:

.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

To make adjustments, play with margin property.

这篇关于将子内容定位在父容器之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！