複数のdivを相互に浮かべてください。

Question

私はスケジューリングのためにこの作業を行っています。私は、ラジオボタンのリストと複数のペインのコンテンツを持っています。コンテンツに応じて、私は正しいコントロールをフェードインしたい。しかし、何らかの理由でdivに浮動小数点を置いてZインデックスを設定していても、浮動小数点数を浮動させるわけではありません。彼らは正しく表示され、消えますが、私はそれらがフェードインとフェードアウトして、お互いの上に出て、出てこないようにして、今やっているようにスライドします。

私の見解

<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

を。私はjQueryの表示/非表示を変更しました。それは本当にCSSの問題ではなかった。私は、フェードアウトの長さに設定されたタイムアウトを使用して、それは今すぐスムーズに動作します。

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

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

Answer 2

反復制御divs absoluteを配置し、すべてを相対位置の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

あなたがそのようなものを配置したい場合は、のようなものが必要です。私は解決策を見つけた

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