Заставьте несколько дивов плавать друг над другом

Question

У меня есть этот элемент управления, над которым я работаю для планирования. У меня есть список переключателей, а затем несколько панелей контента. в зависимости от содержания, я хочу, чтобы исчезнуть в правильном контроле. По какой-то причине, если поместить плавающий элемент в элементы 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>&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; }

Я хочу, чтобы они плавали относительно друг над другом в таблице. Любые идеи, как заставить их плавать на вершине друг друга так, чтобы они появлялись и исчезали, не перемещались в положение?

Answer 1

Если вы хотите позиционировать такие вещи, вам нужно что-то вроде:

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

Answer 2

Расположите повторяющиеся элементы управления div и оберните их в относительное положение div.

CSS:

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

HTML:

<tr>
<div class="recurring-wrappper">
--wrapppers--
</div>
<tr>

Не уверен, о чем ты спрашивал ...?

Answer 3

Я нашел решение.Я изменил то, как я показывал / скрывал с помощью своего jQuery.Это закончилось тем, что на самом деле не было проблемы с CSS.Я использовал установленное время ожидания, установленное на длину затухания, и теперь оно работает плавно.

$('#daily-radio').click(function () {
        $('.recurring-control').fadeOut(300, function () {
            clearControls();

            setTimeout(function () {
                $('#daily-control').fadeIn(300) 
            }, 300);
        });
    });