如何將元素放在另一個上面

我有一個<button>，裏面有3個跨度 - 每個跨度包含不同的文本。在不同的時間，由Javascript觸發，按鈕的類將改變。使用CSS轉換&轉換，我有一個跨度移出按鈕，另一個移動。這一切工作。如何將元素放在另一個上面

問題是，按鈕已經增長到跨度1 +跨度2 +跨度3的全寬度。我希望寬度足夠大以包含最大的跨度。如果所有跨度都可以放在另一個之上，這將起作用。

我不知道如何讓3個跨度坐在另一個之上。

這裏的顯示問題小提琴：http://jsfiddle.net/V9yTs/（點擊按鈕查看變化）

編輯這裏的決賽中，工作小提琴：http://jsfiddle.net/XW3DY/7/

2014-01-18 Pickle

一種在每個上層疊的跨度解決方案其他將使用position: relative;（我看你已經在那裏），然後修改跨度2和3的頂部邊距，使它們移動到與跨度1相同的位置。

這是您的更新版本JSFiddle：http://jsfiddle.net/XW3DY/2/

（請注意浮動元素不能放在彼此頂部。這就是爲什麼相對定位一般是用於放置彼此頂部的元素。）

來源

2014-01-18 00:19:52 NathanW

謝謝！那樣做了。我玩過位置：親戚，但卻無法讓它工作。我認爲保證金最高的確做到了這一點。我認爲保證金是使這一切發揮作用的特徵，這似乎很奇怪。無論如何，再次感謝。 – Pickle

僅供您的啓發 - 我將CSS從61優化爲24行：jsfiddle.net/XW3DY/7/ – Pickle

既然你已經使用jQuery，你可以計算出正確的寬度和高度

var w = 0; 
$('.btn .msg').each(function() { 
    w = Math.max(w, $(this).width()); 
}); 

$('.btn').width(w); 

var h = 0; 
$('.btn .msg').each(function() { 
    h = Math.max(h, $(this).height()); 
}); 

$('.btn').height(h);

但現在.msg跨度垂直排列。爲了彌補這一點，取決於你要實現什麼。一個解決方案是使用position: absolute

.btn { 
    position: relative; 
} 
.btn-status .msg { 
    position: absolute; 
}

的.msg跨度現在躺在彼此的頂部。您還必須調整垂直轉換。

查看修改JSFiddle

來源

2014-01-18 01:48:18

如何將元素放在另一個上面

回答

相關問題