Make multiple divs float over one another

I have this control I am working on for scheduling. I have a list of radio buttons and then multiple panes of content. depending on the content, I want to fade in the correct control. For some reason though, putting a float on the divs and setting the z-index is not making them float over one another. They appear and disappear correctly, but I want them to fade in and out on top of one another, not appear and then slide into place like they are doing now.

my view

<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>

and here is my 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; }

I want them to float relatively within the table over one another. Any ideas how to get them to float on top of eachother so as they fade in and out they don't move into position?

If you want to position things like that, you need something like:

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

Position the recurring control divs absolute and wrap them all in a div positioned relative.

CSS:

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

HTML:

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

Not sure if that's what you were asking about...?

I found a solution. I changed how I was showing/hiding with my jQuery. It ended up not really being an issue with css. I used set timeout set to the length of the fade out and it works smoothly now.

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

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