如何浮動容器外的元素？

Question

我試圖浮動圖像與文本「最高分」父DIV外#wrapper

<div id="wrapper"> 
     <div class = "col1-content"> 
      <div class="ribbon left"> 
       <h2>My top Score</h2> 
      </div> 

     </div> <!-- col1-content --> 
</div> 

#wrapper .col1-content .ribbon{ 
    position: absolute; 
    width:330px; 
    height: 89px; 
    z-index: 10; 

} 

#wrapper .col1-content .left{ 
    background:url(../images/ribbon_left.png) no-repeat 0 0; 
    left: -35px; 
} 

#wrapper .para h2{ 
    font-family:"Lucida Console", Monaco, monospace; 
    font-size:24px; 
    font-weight:lighter; 
    padding-left: 30px; 
} 

Answer 1

<div id="wrapper"> 
     <div class = "col1-content"> 
      <div class="ribbon left"> 
       <h2>My top Score</h2> 
      </div> 
      <div class="para-score"> 
       <ul> 
        <li id="avatar"></li> 
        <li id="name"></li> 
        <li id="score"></li> 
       </ul> 
      </div> 
     </div> <!-- col1-content --> 
</div> 

#wrapper {position:relative;} 

#wrapper .left{ 
    background:url(../images/ribbon_left.png) no-repeat 0 0; 
    left: -35px; 
    top:0; 
    position:absolute; 
} 

Answer 2

你的文本消失在該網頁上，因爲你使用的是類「左：-35px;」有一個相對的位置。您應該爲其指定絕對位置或移動「left：-35px;」到.ribon類。

#wrapper .col1-content .ribbon{ 
    position: absolute; 
    left: -35px; 
    width:330px; 
    height: 89px; 
    z-index: 10; 

} 

#wrapper .col1-content .left{ 
    background:url(../images/ribbon_left.png) no-repeat 0 0; 
} 

#wrapper .para h2{ 
    font-family:"Lucida Console", Monaco, monospace; 
    font-size:24px; 
    font-weight:lighter; 
    padding-left: 30px; 
}