如何浮动容器外的元素？

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; 
}