父容器

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屬性發揮。

Answer 2

一些像這樣的事情可以做

<div class="wrapper">   
<h2>Desired effect</h2> 

    <div class="inner-wrap"> 
     <div class="main"> 
      <article> 
       <header class="article_header">article header - unknown height</header> 
       <section class="article_body">article body</section> 
      </article> 
     </div> 
     <div class="aside">aside</div> 
    </div> 
</div> 

CSS

body { 
    font-family: helvetica, arial, sans-serif; 
} 
.wrapper { 
    margin:0 auto; 
    width:80%; 
} 
h2 { 
    text-align: center; 
} 
.inner-wrap { 
    background: none repeat scroll 0 0 #CCCCCC; 
    margin: 41px auto 0; 
    position: relative; 
    width: 940px; 
} 
.inner-wrap > * { 
    padding: 10px; 
} 
.main { 
    background: tomato; 
    float: left; 
    width: 600px; 
} 
.article_header { 
    background: none repeat scroll 0 0 #4682B4; 
    color: #FFFFFF; 
    left: 0; 
    padding: 1%; 
    position: absolute; 
    top: -39px; 
    width: 98%; 
} 
.aside { 
    background: cyan; 
    float: right; 
    width: 300px; 
} 

的jsfiddle：http://jsfiddle.net/w26yw/1/即：http://jsfiddle.net/w26yw/1/show/

Answer 3

你可以做這樣的：

.inner-wrap {position: relative; overflow: visible;} 

.inner-wrap:after {content:""; display:table; clear:both;} 

.article_header {position: absolute; width: 940px; left: 0; bottom: 100%;} 

我已經去除了overflow: hidden並用clearfix方法取而代之。

Answer 4

這是最乾淨的解決方案。這基本上是最初的@Mr_Green答案，稍微修復一下。

.main > article { 
    position: relative; 
} 
.article_header { 
    background: SteelBlue; 
    color: #fff; 
    position: absolute; 
    bottom: 100%; 
    margin-bottom: 10px; /* to neutralize padding of parent container */ 
    margin-left: -10px; /* to neutralize padding of parent container */ 
    padding: 0px 10px; /* to neutralize padding of parent container */ 
    width: 920px; 
} 
.inner-wrap { 
    background: #ccc; 
    width: 940px; 
    margin: 0 auto; 
    /* remove overflow: hidden */ 
} 

這裏有一個working CodePen