[英]Make multiple divs float over one another
我有正在計划的控件。 我有一個單選按鈕列表,然后是多個內容窗格。 根據內容,我想淡入正確的控件。 但是由於某種原因,在div上放置浮點並設置z-index並不能使它們彼此浮起。 它們會正確顯示和消失,但我希望它們彼此淡入淡出,而不是出現然后像現在一樣滑入到位。
我的觀點
<table id="recurring-table">
<tr>
<td id="recurring-selector">
<div><%: Html.RadioButtonFor(x => x.RecurringType, RecurringType.Daily, new { id = "daily-radio", @class = "recurring-selector" }) %> <span>Daily</span></div>
<div><%: Html.RadioButtonFor(x => x.RecurringType, RecurringType.Weekly, new { id = "weekly-radio", @class = "recurring-selector" })%> <span>Weekly</span></div>
<div><%: Html.RadioButtonFor(x => x.RecurringType, RecurringType.Monthly, new { id = "monthly-radio", @class = "recurring-selector" })%> <span>Monthly</span></div>
<div><%: Html.RadioButtonFor(x => x.RecurringType, RecurringType.Yearly, new { id = "yearly-radio", @class = "recurring-selector" })%> <span>Yearly</span></div>
</td>
<td id="recurring-control-wrapper">
<div id="daily-control" class="recurring-control" style="display:none;">
<div><%: Html.RadioButtonFor(x => x.DailySelection, DailySelection.Span, new { id = "daily-span" })%> <span>Every</span> <%: Html.TextBoxFor(x => x.DailyRecurring.Span, new { @class = "small" })%> <span>day(s)</span></div>
<div><%: Html.RadioButtonFor(x => x.DailySelection, DailySelection.EveryWeekday, new { id = "daily-every-weekday" })%> <span>Every Weekday</span></div>
</div>
<div id="weekly-control" class="recurring-control" style="display:none;">
<div><span>Recur every</span> <%: Html.TextBoxFor(x => x.WeeklyRecurring.Span, new { @class = "small" })%> <span>week(s) on:</span></div>
<div><table id="week-day-table">
<tr>
<td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Sunday) %> <span>Sun</span></td>
<td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Monday) %> <span>Mon</span></td>
<td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Tuesday) %> <span>Tue</span></td>
<td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Wednesday) %> <span>Wed</span></td>
</tr>
<tr>
<td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Thursday) %> <span>Thur</span></td>
<td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Friday) %> <span>Fri</span></td>
<td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Saturday) %> <span>Sat</span></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="monthly-control" class="recurring-control" style="display:none;">
Monthly
</div>
<div id="yearly-control" class="recurring-control" style="display:none;">
Yearly
</div>
</td>
</tr>
<tr>
</tr>
</table>
<script type="text/javascript">
$(function () {
$('#daily-radio').click(function () {
$('.recurring-control').fadeOut(300, function () {
clearControls();
$('#daily-control').fadeIn(300);
});
});
$('#weekly-radio').click(function () {
$('.recurring-control').fadeOut(300, function () {
clearControls();
$('#weekly-control').fadeIn(300);
});
});
$('#monthly-radio').click(function () {
$('.recurring-control').fadeOut(300, function () {
clearControls();
$('#monthly-control').fadeIn(300);
});
});
$('#yearly-radio').click(function () {
$('.recurring-control').fadeOut(300, function () {
clearControls();
$('#yearly-control').fadeIn(300);
});
});
function clearControls() {
$('.recurring-control input:radio').attr('checked', false);
$('.recurring-control input:text').val('');
}
});
</script>
這是我的CSS
#recurring-table { width:100% }
#recurring-table span { font-weight: bold; text-transform: capitalize; margin-bottom: 6px; color: #5a5a5a; /*font-size: 1.2em;*/ }
#recurring-table div { padding: 3px 0 3px 0; }
#recurring-selector { width: 100px; }
.recurring-control { /*float: left; position: relative; top: 0; left: 0;*/}
#daily-control { z-index:10; }
#weekly-control { z-index:11; }
#monthly-control { z-index:12; }
#yearly-control { z-index:13; }
我希望他們相對漂浮在桌子上。 有什么想法可以使它們漂浮在彼此的頂部,從而使它們淡入淡出而不移動到位?
如果要定位類似的東西,則需要類似以下內容:
#recurring-control-wrapper {
position: relative;
}
.recurring-control {
position: absolute
top: 0;
left: 0;
}
將循環控件div絕對定位,並將它們全部包裝在相對的div中。
CSS:
.recurring-control{position:absolute; top:0: left:0}
.recurring-wrappar{position:relative;}
HTML:
<tr>
<div class="recurring-wrappper">
--wrapppers--
</div>
<tr>
不確定這是否是您要問的...嗎?
我找到了解決方案。 我更改了顯示/隱藏jQuery的方式。 它最終並不是css真正的問題。 我使用set timeout設置為淡出的長度,現在可以正常使用了。
$('#daily-radio').click(function () {
$('.recurring-control').fadeOut(300, function () {
clearControls();
setTimeout(function () {
$('#daily-control').fadeIn(300)
}, 300);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.