Question

如果我在标题上放置一个高z-index，那部分可以很好地工作，但是其他div中的链接都不可点击！我忽视了一些简单的事情，我无法看到它。我可以包括我的CSS的其他部分 - 甚至不知道现在在哪里看。

滚动和滚动前的标题：

标题汇总但内容通过它显示：

HTML：

来自HEADER FILE

<nav class="navbar navbar-default wh_header"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:whc="http://www.oxygenxml.com/webhelp/components">
    <div class="container">
        <div class="wh_header_flex_container">
            <div class="wh_logo_and_publication_title_container">
                <div class="wh_logo_and_publication_title">
                    <whc:include_html href="${webhelp.fragment.before.logo_and_title}"/>
                    <!--
                            This component will be generated when the next parameters are specified in the transformation scenario:
                            'webhelp.logo.image' and 'webhelp.logo.image.target.url'.
                            See: http://oxygenxml.com/doc/versions/17.1/ug-editor/#topics/dita_webhelp_output.html.
                    -->
                    <whc:webhelp_logo class="hidden-xs"/>
                    <whc:webhelp_publication_title/>
                    <whc:include_html href="${webhelp.fragment.after.logo_and_title}"/>
                </div> 

             <div class="print index">
                 <whc:webhelp_breadcrumb/>
                 <whc:webhelp_search_input/>
                 <whc:webhelp_print_link class="print"/>
                <whc:webhelp_indexterms_link/>
             </div> 

                <!-- The menu button for mobile devices is copied in the output only when the 'webhelp.show.top.menu' parameter is set to 'yes' -->
                <button type="button" data-target=".wh_top_menu_and_indexterms_link" id="wh_menu_mobile_button" data-toggle="collapse" class="navbar-toggle collapsed wh_toggle_button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="wh_top_menu_and_indexterms_link collapse navbar-collapse">
                <whc:include_html href="${webhelp.fragment.before.top_menu}"/>
                <whc:webhelp_top_menu />
                <!-- <whc:webhelp_indexterms_link/> -->
                <whc:include_html href="${webhelp.fragment.after.top_menu}"/>
            </div>
        </div>

  </div>
</nav>

来自主题文件的身体

<body class="wh_topic_page" data-spy="scroll" data-target="#toc">
        <!-- EXM-36950 - Expand the args.hdr parameter here -->
        <whc:include_html href="${args.hdr}"/>
        <whc:include_html href="${webhelp.fragment.before.body}"/>
        &header;

        <div class="container-fluid">
            <div class="row">

               <nav class="wh_tools hidden-print">


                    <div class="wh_right_tools hidden-sm hidden-xs">
                        <whc:webhelp_navigation_links/>

                        <whc:webhelp_toggle_highlight/>
                    </div>
                </nav> 
            </div> 

            <div class="wh_content_area">
                <div class="row">
                    <nav role="navigation" 
                        class="col-lg-4 col-md-4 col-sm-4 col-xs-12 navbar hidden-print" id="wh_side_toc">
                        <whc:webhelp_side_toc data-tooltip-position="${webhelp.side.toc.tooltip.position}"/>
                    </nav>
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12" id="topic_content">

                        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                            <whc:webhelp_topic_content class="body"/>
                            <whc:webhelp_child_links/>
                            <whc:webhelp_related_links/>
                            <whc:webhelp_feedback/>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                            <nav id="toc" data-spy="affix" data-toggle="toc" data-offset-top="205"></nav>
                        </div>
                    </div>
                </div>
            </div>
        </div> &footer;

CSS：

.navbar {
   /* background-color: transparent; */
 background-color: #e6edf1; 
    background-image: none;
   /* background-image: url(images/skin_images/unity_gradient.png);
    background-repeat: repeat-x;*/
    border: none;
    border-radius: 0;
    margin: 0;
    /*position: fixed; */
    /* z-index: 4; */
    top: 0px;
    /*box-shadow: 0 1px 2px 0 black; 
    height: 30px;   */

}

.wh_header {
   /*width: 960px;*/
width: 100%;
   margin: auto;
   /*text-align: right;*/
   height: 80px; 
/* height: 100px; */
/*    position: fixed;
    top:0px; */
    padding-top: 20px;
    padding-right: 6px;
   /* z-index: 10000; */
  /* background-color: #e6edf1; */
 /* background-color: #ffffff; */
  background-image: url(../../../resources/images/unity_gradient_resized.png); 

}

.fixed-header {
  position: fixed;
  top:0; left:0;
  width: 100%; 
height: 36px;
padding-top: 6px;

}

Answer 1

尝试Z-indexing，这是因为您的Navbar位于“身体下方”

.navbar{
z-index:100
}

我的标题保持固定，但我的身体仍然滚动它

1 个答案: