Question

在为我的设施设计工作预订页面时，到目前为止我无法获得一个属性。这是一个固定的标题，即使日历滚动到它，它也总是可见并且“在顶部”。目前的行为是日历对象在标题上滚动，这导致相当不吸引人的视觉效果。我尝试了很多使用各种div / css设置的工作，这些设置旨在解决这种行为，并在非FC网页中完美运行。日历会覆盖，例如z-index和容器div的阻止设置。[screen shot showing the header with calendar overlapping the header.

有人知道如何强制日历在固定标题下方渲染吗？如果不对CSS文件进行大修，这甚至可能吗？

Answer 1

所以我得到了它的工作：正确的摆弄是关键。在最外层页面容器上设置z-index = -1，并仔细注意后续容器的分层和定位，直至并包括日历本身，这使其工作。

我认为我的问题是，起初我没有完整处理文档中容器的分层，并且可能试图将我标题的最外层容器的z-index设置为一个很大的值来考虑它将标题推到堆栈的顶部。

重要的CSS和正文布局代码仅部分复制用于检查

<style>
    /* <!-- Masthead definition --> */    
    .header{ 
      width:100%; 
      position:fixed !important; 
      height:auto; 
      padding-bottom:5px; 
      background:#c8102e; 
      top:50;
    }
 
    /* <!-- Set the main Calendar container to 100% width so that sub-containers can float center --> */
    /* <!-- Set the main Calendar container relative position to help fix its position--> */
    .mainPage {
      width: 100%;
      position:relative;
      top:50; 
      height: auto;
      z-index:-1; /* <!-- push its contents under the Masthead --> */
     }
    
    /* <!-- Set this subcontainer to absolute postion to help force it below Masthead--> */
    /* <!-- maintain 100% width setting --> */
    #calendarme {
      position:absolute;
      overflow:auto;
      width: 100%;
      margin-top: 130px;
      margin-bottom: 10px;
     }

</style>
   <body>
     <!-- Masthead content -->
     <div data-role="page" id="page1">
       <!-- Main Site Name Header imutable kind of -->
       <div data-role="header" id="headerme" class="header">
         <div class="inner-topHeader-panel">
           <h1><center><b>UH SERC-NMR Reservation</b></center></h1>
         </div>  
       </div> 	
     </div> 
     <div data-role="page" class="mainPage">  
       <div role="main inner-centercontent" class="ui-content" id="calendarme">   
         <div id="FC-container" class="container" >  
         
         <!-- Calendar -->
           <div id="calendar-div" class="container">
             <div id="Calendar"></div>
           </div> 
         </div>
       </div>
     </div>
   </body>

fullcalendar设置可以不与固定的导航栏或标题重叠

1 个答案: