無絕對位置

Question

一個div內一個div的絕對位置我做了我的問題的小提琴很容易看到它：

https://jsfiddle.net/6jzb09nd/

我有一系列嵌套的div。而巢的最底部我想要一個絕對定位的div，所以我可以把它放在它的父div中。

它的工作原理是當它是頁面上唯一的東西，但是當我開始添加其他元素時，定位變得混亂起來。

在小提琴中，如果取消註釋「// float：left」，則可以看到定位中斷。

下面的代碼：

.col-sm-2, 
.col-sm-10 { 
    //float:left; 
} 

.leftnumouter { 
    color: #fff; 
    font-size: 4.5vw; 
    height: 4.5vw; 
    width: 4.5vw; 
    float: left; 
    background: #393; 
    position: relative; 
    border: 0px solid black; 
} 

.rightnumouter { 

    color: #fff; 
    font-size: 4.5vw; 
    height: 4.5vw; 
    width: 4.5vw; 
    float: left; 
    background: #C33; 
    position: relative; 
    border: 0px solid black; 
} 

.leftnuminner { 
    color: #000; 
    position: absolute; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.rightnuminner { 
    color: #fff; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.lefttextouter { 
    background: #3C9; 
    border-radius: 0 1.5vw 1.5vw 0; 
    color: #000; 
    font-size: 3vw; 
    height: 3.2vw; 
    text-transform: uppercase; 
    float: left; 
    padding: 0 0 0 0; 
    position: relative; 
} 

.righttextouter { 
    background: #C69; 
    border-radius: 0 1.5vw 1.5vw 0; 
    color: #000; 
    font-size: 3vw; 
    height: 3.2vw; 
    text-transform: uppercase; 
    float: left; 
    padding: 0 0 0 .2vw; 
    position: relative; 
} 

.lefttextinner { 
    color: #000; 
    margin: 0 .5vw 0 0; 
} 

.righttextinner { 
    color: #000; 
    margin: 0 1vw 0 0; 
} 

<div class="col-sm-2"> Blah 
</div> 
<div class="col-sm-10"> 
    <div class="preview"> 
    <div class="databubble"> 
     <div class="leftnumouter"> 
     <div class="leftnuminner">5 
     </div> 
     </div> 
     <div class="lefttextouter"> 
     <div class="lefttextinner">Sales 
     </div> 
     </div> 
    </div> 
    <div class="databubble"> 
     <div class="rightnumouter"> 
     <div class="rightnuminner">3 
     </div> 
     </div> 
     <div class="righttextouter"> 
     <div class="righttextinner">Orders 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

Answer 1

由於與float瓦解其內容的元素，你需要給它一個寬度

.col-sm-2, 
 
.col-sm-10 { 
 
    float:left; 
 
    width: 100%; 
 
} 
 

 
.leftnumouter { 
 
    color: #fff; 
 
    font-size: 4.5vw; 
 
    height: 4.5vw; 
 
    width: 4.5vw; 
 
    float: left; 
 
    background: #393; 
 
    position: relative; 
 
    border: 0px solid black; 
 
} 
 

 
.rightnumouter { 
 
    color: #fff; 
 
    font-size: 4.5vw; 
 
    height: 4.5vw; 
 
    width: 4.5vw; 
 
    float: left; 
 
    background: #C33; 
 
    position: relative; 
 
    border: 0px solid black; 
 
} 
 

 
.leftnuminner { 
 
    color: #000; 
 
    position: absolute; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.rightnuminner { 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.lefttextouter { 
 
    background: #3C9; 
 
    border-radius: 0 1.5vw 1.5vw 0; 
 
    color: #000; 
 
    font-size: 3vw; 
 
    height: 3.2vw; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    padding: 0 0 0 0; 
 
    position: relative; 
 
} 
 

 
.righttextouter { 
 
    background: #C69; 
 
    border-radius: 0 1.5vw 1.5vw 0; 
 
    color: #000; 
 
    font-size: 3vw; 
 
    height: 3.2vw; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    padding: 0 0 0 .2vw; 
 
    position: relative; 
 
} 
 

 
.lefttextinner { 
 
    color: #000; 
 
    margin: 0 .5vw 0 0; 
 
} 
 

 
.righttextinner { 
 
    color: #000; 
 
    margin: 0 1vw 0 0; 
 
}

<div class="col-sm-2"> Blah 
 
</div> 
 
<div class="col-sm-10"> 
 
    <div class="preview"> 
 
    <div class="databubble"> 
 
     <div class="leftnumouter"> 
 
     <div class="leftnuminner">5 
 
     </div> 
 
     </div> 
 
     <div class="lefttextouter"> 
 
     <div class="lefttextinner">Sales 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="databubble"> 
 
     <div class="rightnumouter"> 
 
     <div class="rightnuminner">3 
 
     </div> 
 
     </div> 
 
     <div class="righttextouter"> 
 
     <div class="righttextinner">Orders 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

或設置一些更多的規則，使所有行爲

.preview { 
    overflow: hidden; 
    white-space: nowrap; 
} 
.databubble { 
    display: inline-block; 
} 

樣品

.col-sm-2, 
 
.col-sm-10 { 
 
    float:left; 
 
} 
 
.col-sm-2:after, 
 
.col-sm-10:after { 
 
    content: ''; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
/* added these 2 rules */ 
 
.preview { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 
.databubble { 
 
    display: inline-block; 
 
} 
 

 
.leftnumouter { 
 
    color: #fff; 
 
    font-size: 4.5vw; 
 
    height: 4.5vw; 
 
    width: 4.5vw; 
 
    float: left; 
 
    background: #393; 
 
    position: relative; 
 
    border: 0px solid black; 
 
} 
 

 
.rightnumouter { 
 
    color: #fff; 
 
    font-size: 4.5vw; 
 
    height: 4.5vw; 
 
    width: 4.5vw; 
 
    float: left; 
 
    background: #C33; 
 
    position: relative; 
 
    border: 0px solid black; 
 
} 
 

 
.leftnuminner { 
 
    color: #000; 
 
    position: absolute; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.rightnuminner { 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.lefttextouter { 
 
    background: #3C9; 
 
    border-radius: 0 1.5vw 1.5vw 0; 
 
    color: #000; 
 
    font-size: 3vw; 
 
    height: 3.2vw; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    padding: 0 0 0 0; 
 
    position: relative; 
 
} 
 

 
.righttextouter { 
 
    background: #C69; 
 
    border-radius: 0 1.5vw 1.5vw 0; 
 
    color: #000; 
 
    font-size: 3vw; 
 
    height: 3.2vw; 
 
    text-transform: uppercase; 
 
    float: left; 
 
    padding: 0 0 0 .2vw; 
 
    position: relative; 
 
} 
 

 
.lefttextinner { 
 
    color: #000; 
 
    margin: 0 .5vw 0 0; 
 
} 
 

 
.righttextinner { 
 
    color: #000; 
 
    margin: 0 1vw 0 0; 
 
}

<div class="col-sm-2"> Blah 
 
</div> 
 
<div class="col-sm-10"> 
 
    <div class="preview"> 
 
    <div class="databubble"> 
 
     <div class="leftnumouter"> 
 
     <div class="leftnuminner">5 
 
     </div> 
 
     </div> 
 
     <div class="lefttextouter"> 
 
     <div class="lefttextinner">Sales 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="databubble"> 
 
     <div class="rightnumouter"> 
 
     <div class="rightnuminner">3 
 
     </div> 
 
     </div> 
 
     <div class="righttextouter"> 
 
     <div class="righttextinner">Orders 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>