Flexbox重疊絕對定位兒童

我對flexbox容器有絕對定位兒童的問題。Flexbox重疊絕對定位兒童

FIDDLE;如果窗口變小（寬度）標題變小，什麼是絕對正確的，問題在於與其他手錶重疊的數字。我測試了一下z-Index,background-color，但沒有得到任何工作。

HTML：

<div class="stopwatch"> 
    <div class="stopwatch__panel"> 
     <div class="stopwatch__header"> 
      <div class="stopwatch__title">Random Title 404531</div> 
     </div> 
     <div class="stopwatch__body"> 
      <div class="stopwatch__counter"> 
       <div class="stopwatch__segment stopwatch__segment--five"> 
        <div class="stopwatch__segmentTopLeft"></div> 
        <div class="stopwatch__segmentTop"></div> 
        <div class="stopwatch__segmentTopRight"></div> 
        <div class="stopwatch__segmentMiddle"> 
         <div class="stopwatch__segmentMiddleTop"></div> 
         <div class="stopwatch__segmentMiddleBottom"></div> 
        </div> 
        <div class="stopwatch__segmentBottomLeft"></div> 
        <div class="stopwatch__segmentBottom"></div> 
        <div class="stopwatch__segmentBottomRight"></div> 
       </div> 
       <div class="stopwatch__segment stopwatch__segment--five"> 
        <div class="stopwatch__segmentTopLeft"></div> 
        <div class="stopwatch__segmentTop"></div> 
        <div class="stopwatch__segmentTopRight"></div> 
        <div class="stopwatch__segmentMiddle"> 
         <div class="stopwatch__segmentMiddleTop"></div> 
         <div class="stopwatch__segmentMiddleBottom"></div> 
        </div> 
        <div class="stopwatch__segmentBottomLeft"></div> 
        <div class="stopwatch__segmentBottom"></div> 
        <div class="stopwatch__segmentBottomRight"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="stopwatch__panel"> 
     <div class="stopwatch__header"> 
      <div class="stopwatch__title">Random Title 714895</div> 
     </div> 
     <div class="stopwatch__body"> 
      <div class="stopwatch__counter"> 
       <div class="stopwatch__segment stopwatch__segment--nine"> 
        <div class="stopwatch__segmentTopLeft"></div> 
        <div class="stopwatch__segmentTop"></div> 
        <div class="stopwatch__segmentTopRight"></div> 
        <div class="stopwatch__segmentMiddle"> 
         <div class="stopwatch__segmentMiddleTop"></div> 
         <div class="stopwatch__segmentMiddleBottom"></div> 
        </div> 
        <div class="stopwatch__segmentBottomLeft"></div> 
        <div class="stopwatch__segmentBottom"></div> 
        <div class="stopwatch__segmentBottomRight"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.stopwatch { 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    display: flex; 
    justify-content: flex-end; 
    align-items: flex-end; 
    max-width: 100%; 
    width: 100%; 
} 

.stopwatch__panel { 
    background-color: #ffffff; 
    border: 1px solid #dddddd; 
    display: flex; 
    flex-flow: column; 
    min-width: 0; 
} 

.stopwatch__header { 
    background-color: #f5f5f5; 
    display: flex; 
    align-items: center; 
    order: 1; 
} 

.stopwatch__title { 
    flex: 1 1 auto; 
    padding: 5px; 
    border-left: 1px solid #dddddd; 
    word-wrap: break-word; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

.stopwatch__body { 
    display: flex; 
    align-items: stretch; 
} 

.stopwatch__counter { 
    background-color: #333333; 
    padding: 15px; 
    flex-grow: 1; 
    text-align: center; 
    color: #ffffff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.stopwatch__segment { 
    position: relative; 
    float: left; 
    margin: 6px; 
    width: 18px; 
    height: 35px; 
    transition: all 200ms ease-in-out; 
} 

.stopwatch__segment--zero .stopwatch__segmentTopRight { 
    border-right-color: #e6e6e6; 
} 
/* [...all numbers from zero to nine... (only coloring borders) ] */ 
.stopwatch__segment--nine .stopwatch__segmentBottom { 
    border-bottom-color: #e6e6e6; 
} 

.stopwatch__segmentTop { 
    position: absolute; 
    left: 1px; 
    height: 0; 
    width: 10px; 
    border-top: 3px solid #424242; 
    border-left: 3px solid transparent; 
    border-right: 3px solid transparent; 
    transition: all 200ms ease-in-out; 
} 

.stopwatch__segmentTopRight { 
    position: absolute; 
    left: 15px; 
    top: 1px; 
    height: 10px; 
    width: 0; 
    border-right: 3px solid #424242; 
    border-top: 3px solid transparent; 
    border-bottom: 3px solid transparent; 
    transition: all 200ms ease-in-out; 
} 
/* [... the other segments parts ...] */

來源

2016-04-19 Jason Schilling

我不知道你期待什麼有發生。絕對定位將做它做的事情。我不確定Flexbox可以做些什麼來改變它， –

@Paulie_D我不知道問題來自何處，Flexbox或絕對定位。你沒有看到重疊（圖像）？ –

添加overflow:hidden;到.stopwatch__counter

.stopwatch__counter { 
    background-color: #333333; 
    padding: 15px; 
    flex-grow: 1; 
    text-align: center; 
    color: #ffffff; 
    display: flex; 
    overflow:hidden; 
    align-items: center; 
    justify-content: center; }

看到這個小提琴： https://jsfiddle.net/grassog/jcgyce3g/2/

來源

2016-04-19 10:53:31 Giuseppe

我想，我失去了概述！我另外把'width'從'.stopwatch_segment'改爲'min-width'謝謝！ +1 –

Flexbox重疊絕對定位兒童

回答

相關問題