<div> 挡住链接的处理方式，z-index属性

Blogging
,

突然发现有篇博文中的一个链接无法点击，inspect之后发现是被一个id为header-post的div挡住了。参见下图中「弗拉芒大区」右侧的「Vlaams Gewest」，因为被挡住了点不到。header-post应该是存放导航栏nav和目录toc的容器，在页面顶端nav自动出现时适应为nav的宽和目录的高，挡住一大片东西。

去原主题的repo搜索了一圈issue关键词，没看到有人提。然后去原作者的demo网页发现他的这个网页也有同样的问题+_+||, 只是因为他要么因为nav放的链接少，要么nav与目录不共存，所以这个问题不明显。这个主题毛病真的好多

最后自己在#header-post这个selector下探索出来的解决方式是将action_desktop.styl中对应id#header-post的z-index改为auto。关于z-index属性，可参见mdn官网的展示小组件，大概类似于置于顶层/底层，直观来说，这样改了后那个div就缩到底层去了，你自然就能点得到位于文章主干的link了。

1
2
3
4
5
6
7
#header-post
  position: fixed
  top: 2rem
  right: 0
  display: inline-block
  float: right
  z-index: auto

UPDATE 坏消息是这样做了后，你没法点到nav伸到主干里的那几个link了。。

  • 改进思路1：放弃顶部nav，nav回归底部；
  • 改进思路2: 试试能不能把nav的div z-index到顶部。

思路2 将 nav 对应的 #menu 的z-index设为100
想要将 文章content上方的box放到后面，即 style.styl中 *, *:before, *:after 的z-index设为-1

最后发现行不通，因为z-index是子代继承父代。nav为 div的子代，它的z index被锚定在div附近，你不可能在div和nav之间插入div家系里以外的元素。

  • 改进思路2*，在layout中，把nav移出header-post.（unconfirmed）

最后解决方案：思路1 将作者名设置为回到主页的超链接，并且当目录toc有子元素#toc-item时隐藏nav。将main.js中对应代码改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/**
 * Add a scroll listener to the menu to hide/show the navigation links.
 */
if (menu.length) {

  /// 隐藏导航栏 hide nav when have toc
  if ($(".toc-item").length) {
    nav.hide();
  } else {

  $(window).on("scroll", function() {
    var topDistance = menu.offset().top;

    // hide only the navigation links on desktop
    if (!nav.is(":visible") && topDistance < 150) {
      nav.show();
    } else if (nav.is(":visible") && topDistance > 50) {
      nav.hide();
    }

    // on tablet, hide the navigation icon as well and show a "scroll to top
    // icon" instead
    if ( ! $( "#menu-icon" ).is(":visible") && topDistance < 50 ) {
      $("#menu-icon-tablet").show();
      $("#top-icon-tablet").hide();
    } else if (! $( "#menu-icon" ).is(":visible") && topDistance > 100) {
      $("#menu-icon-tablet").hide();
      $("#top-icon-tablet").show();
    }
    }); 
  } 
}

P.S. 注意这个cactus主题md的metadata里categories要统一大小写，不然会导致分类的categories page解析错误出现混乱。