jquery - 使多个 div 相互 float

Question

我正在使用此控件来安排时间。我有一个单选按钮列表，然后是多个内容 Pane 。根据内容，我想在正确的控件中淡入淡出。但出于某种原因，在 div 上放置一个 float 并设置 z-index 并不能使它们相互 float 。它们正确地出现和消失，但我希望它们在彼此之上淡入和淡出，而不是像现在这样出现然后滑入到位。

我的观点

<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>&nbsp; <%: Html.TextBoxFor(x => x.DailyRecurring.Span, new { @class = "small" })%>&nbsp; <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> &nbsp; <%: Html.TextBoxFor(x => x.WeeklyRecurring.Span, new { @class = "small" })%>&nbsp; <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>&nbsp;</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; }

我希望它们在表格内相对 float 。有什么想法可以让它们漂浮在彼此之上，这样当它们淡入淡出时它们不会移动到位吗？

Answer 1

如果你想定位这样的东西，你需要这样的东西:

#recurring-control-wrapper {
  position: relative;
}
.recurring-control {
  position: absolute
  top: 0;
  left: 0;
}