如果我在标题上放置一个高 z-index，那部分效果很好，但是其他 div 中的链接都不可点击!我忽略了一些简单的东西，但我看不到它。我可以包括我的 css 的其他部分 - 只是不知道现在去哪里看。
滚动和向上滚动前的页眉:
页眉卷起但内容通过它显示:
HTML:
来自头文件
<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;
}
最佳答案
尝试 Z 索引，这是因为您的导航栏在您的 body “下方”
.navbar{
z-index:100
}
关于html - 我的标题保持固定，但我的 body 仍在滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47333922/