Boostrap按鈕覆蓋

我想重疊2個按鈕（一個是圓圈，另一個是正常按鈕）。這可以使用下面的CSS來實現。但是，我面臨另一個問題，它不響應。我想連續添加4個按鈕（2個圓圈和2個正常）。Boostrap按鈕覆蓋

而且放置在這些按鈕之後的任何元素定位不正確。即如果我在div中放置新文本，文本會覆蓋在這些按鈕上。

我該如何避免這種情況？以及如何使這種響應？

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 

 
.btn-circle { 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    padding: 6px 0; 
 
    font-size: 12px; 
 
    line-height: 1.428571429; 
 
    border-radius: 15px; 
 
} 
 

 
.btn-circle.btn-xl { 
 
    width: 70px; 
 
    height: 70px; 
 
    padding: 10px 16px; 
 
    font-size: 24px; 
 
    line-height: 1.33; 
 
    border-radius: 35px; 
 
    border-width: thick; 
 
    background-color: darkgrey; 
 
    color: white; 
 
} 
 

 

 
/*Image overlay*/ 
 

 
.container_row { 
 
    position: relative; 
 
} 
 

 
.background-layer { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 50px; 
 
    top: 10px; 
 
    height: 50px; 
 
} 
 

 
.foreground-layer { 
 
    position: absolute; 
 
    z-index: 2; 
 
    left: 0; 
 
    top: 0; 
 
    height: 50px; 
 
} 
 

 
.btn-lg-overlay { 
 
    width: 300px; 
 
    height: 50px; 
 
    border-color: lightgrey; 
 
    border-width: 5px; 
 
    background-color: darkgray; 
 
}

<div class="container_row"> 
 
    <div class="foreground-layer"> 
 
    <button type="button" class="btn btn-default btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button> 
 
    </div> 
 
    <div class="background-layer"> 
 
    <button type="button" class="btn btn-default btn-lg btn-lg-overlay"><i>Requested</i></button> 
 
    </div> 
 
</div>

來源

2017-03-27 Alan B

這似乎是絕對定位的問題給予一定的padding or margin。絕對定位的元素將從文檔流中移除，它們相對於頁面上的某個其他元素進行定位。這意味着它們將對此流程後面的其他元素「不可見」。

當你有包裝div，在你的案例container_row，它會根據它的內部元素的寬度和高度自動調整其寬度和高度，遵循此文檔流程。如果你絕對定位內部元素，你的情況foreground-layer和background-layer他們不會遵循這一流程，因此，包裝div不會看到他們這意味着它的寬度和高度，如果你嘗試自動設置爲0。

把兩個按鈕放在一個接一個的旁邊，你基本上是試着把兩個零寬度和高度的元素放在一起。這導致它們被置於相同的位置，這使得它們看起來像是重疊的。

解決此問題的一種方法是向您的包裝元素添加特定的高度和寬度。

.container_row { 
    position: relative; 
    width: 350px; 
    height: 70px; 
}

如果您想將多個按鈕放在一起，您可以將它們浮起來。

.container_row { 
    position: relative; 
    float: left; 
    width: 350px; 
    height: 70px; 
}

來源

2017-03-27 06:22:12 DSofa

這並不是由於響應width: 300px給予元素.btn-lg-overlay 。 Plus是文字背後圈隱藏你應該從左邊

來源

2017-03-27 06:04:59

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 

 
.btn-circle { 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    padding: 6px 0; 
 
    font-size: 12px; 
 
    line-height: 1.428571429; 
 
    border-radius: 15px; 
 
} 
 

 
.btn-circle.btn-xl { 
 
    width: 70px; 
 
    height: 70px; 
 
    padding: 10px 16px; 
 
    font-size: 24px; 
 
    line-height: 1.33; 
 
    border-radius: 35px; 
 
    border-width: thick; 
 
    background-color: darkgrey; 
 
    color: white; 
 
} 
 

 

 
/*Image overlay*/ 
 

 
.container_row { 
 
    position: relative; 
 
} 
 

 
.background-layer { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 50px; 
 
    top: 10px; 
 
    height: 50px; 
 
} 
 

 
.foreground-layer { 
 
    position: absolute; 
 
    z-index: 2; 
 
    left: 0; 
 
    top: 0; 
 
    height: 50px; 
 
} 
 

 
.btn-lg-overlay { 
 
    width: 300px; 
 
    height: 50px; 
 
    border-color: lightgrey; 
 
    border-width: 5px; 
 
    background-color: darkgray; 
 
}

<div class="container_row"> 
 
    <div class="foreground-layer"> 
 
    <button type="button" class="btn btn-default btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button> 
 
    </div> 
 
    <div class="background-layer"> 
 
    <button type="button" class="btn btn-default btn-lg btn-lg-overlay"><i>Requested</i></button> 
 
    </div> 
 
</div> 
 

 
<br><br><br><br> 
 
<p>TEXT.........MORE TEXT</p>

來源

2017-03-27 06:09:50 Sank6

Boostrap按鈕覆蓋

回答

相關問題