guest@gitkeniwo.github.io: ~
~> glow -p 2023-02-10-div-blocks-links.md

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

突然发现有篇博文中的一个链接无法点击,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了。

#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中对应代码改为

/**
 * 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解析错误出现混乱。

(END)
~>