Sass 如何制作我的<；标题>；仅跨越2个网格单元，并在Susy Compass中保持其位置固定？

我有一个

标题

，它横跨其

div.page

容器的整个宽度（14列）。我的Susy网格有14列宽。因此，现在当我尝试单击以检查googledev工具中

标题下的
元素下的其他页面元素时，我就是不能。我只能访问
标题

下面您可以看到
标题
，它有一个半透明的粉红色
背景色
。每次单击顶部的绿色
div
s，我都会点击
标题


我想要的是，该页眉只跨页面的前两个左栏。问题是我需要一个固定位置的
标题
，它将包含我的
h1
标题和
nav
，因此我需要一个新的
容器
上下文，类似于Eric Meyer在这里所做的


我真的不知道我做错了什么。这是没有办法的吗

我的
style.sass

@import compass
@import susy
@import normalize



 /* Susy Settings */

$total-columns  : 5             
$column-width   : 4em            
$gutter-width   : 1em            
$grid-padding   : $gutter-width  

$tablet : 10
$desktop : 14

// Susy-grid-background override to draw out horizontal lines
=susy-grid-background       
  +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)

$base-font-size: 18px
$base-line-height: 30px
+establish-baseline

ul
  background-color: rgb(111, 50%, 250)

li
  background: rgba(200,50,0,.2)
  text-align: right

a
  background: rgba(0,220,0,.2)
  display: block

h1
  +adjust-font-size-to(90px)
  +adjust-leading-to(4, 90px)
  +leader(2, 90px)
  background: rgba(0,20,200,.3)

h1#logo
  +adjust-font-size-to(30px)
  +adjust-leading-to(2, 30px)
  +leader(0, 30px)

h2
  +adjust-font-size-to(25px)
  +adjust-leading-to(1, 25px)
  background: rgba(250,250,0,.2)

p
  +leader(1)
  +trailer(1)
  background: rgba(0,220,0,.2)

.page, header, .pagenav, .main, .pagefoot
  +transition(all .3s ease)

.page                                
  +container($total-columns, $tablet, $desktop)
  +susy-grid-background


/* BREAKPOINTS */

+at-breakpoint($desktop)
  .page
    +susy-grid-background

  header
    +container
    +susy-grid-background
    background: rgba(250,0,0,.2)
    position: fixed
    left: 0
    right: 0

    h1#logo a
      +hide-text
      float: right
      +span-columns(2)
      background: rgba(200,10,250,.1)

    .pagenav
      clear: both
      float: right
      +span-columns(2)
      background: rgba(0,140,250,.3)

  .main
    +span-columns(12 omega)
    +leader(2)
    background: rgba(1,240,200,.3)

  .tile
    // +span-columns(4, 12)
    +isolate-grid(4, 12)
    +adjust-leading-to(9)
    +trailer(1)
    background: #0f6   

    .tile_title
      +adjust-font-size-to(25px)
      +adjust-leading-to(1, 25px)
      background: #af6   

  .pagefoot
    background: rgba(45,0,120,.3)
    +span-columns(12,12)   

更新
我尝试了Eric Meyer的建议，将
z-index:-1
应用于
标题
元素，将其发送到我所有的绿色div后面。这让我可以点击我的绿色div，但现在当我尝试点击我的
nav
链接时，我点击了
.page
容器。然后我尝试将
z-index:2
应用到
.page
容器中，但没有任何帮助。不确定如何获得对
nav

这是我的新代码：

@import compass
@import susy
@import normalize
@import base


$base-font-size: 18px
$base-line-height: 30px
+establish-baseline

ul
  background-color: rgb(111, 50%, 250)

li
  background: rgba(200,50,0,.2)
  text-align: right

a
  background: rgba(0,220,0,.2)
  // display: block

h1
  +adjust-font-size-to(90px)
  +adjust-leading-to(4, 90px)
  +leader(2, 90px)
  background: rgba(0,20,200,.3)

h1#logo
  +adjust-font-size-to(30px)
  +adjust-leading-to(2, 30px)
  +leader(0, 30px)

h2
  +adjust-font-size-to(25px)
  +adjust-leading-to(1, 25px)
  background: rgba(250,250,0,.2)

p
  +leader(1)
  +trailer(1)
  background: rgba(0,220,0,.2)

.page, header, .pagenav, .main, .pagefoot
  +transition(all .3s ease)

.page                                
  +container($total-columns, $tablet, $desktop)
  +susy-grid-background


/* BREAKPOINTS */

+at-breakpoint($desktop)
  .page
    +container
    +susy-grid-background

  header
    +container
    +susy-grid-background
    background: yellow
    z-index: -1
    position: fixed
    left: 0
    right: 0

    h1#logo a
      +hide-text
      float: right
      +span-columns(2)
      background: rgba(200,10,250,.1)

    .pagenav
      clear: both
      float: right
      +span-columns(2)
      background: rgba(0,140,250,.3)

  .main
    +span-columns(12 omega)
    +leader(2)
    background: rgba(1,240,200,.3)

  .tile
    +isolate-grid(4, 12)
    height: 300px
    +trailer(1)

    .tile_title
      +adjust-font-size-to(25px)
      +adjust-leading-to(1, 25px)
      background: #af6   
      margin: 10px
      padding: 5px

    .tile_use
      @extend .tile_title
      +adjust-font-size-to(20px)
      +adjust-leading-to(1, 20px)  

  .pagefoot
    background: rgba(45,0,120,.3)
    +span-columns(12,12)                 

请参阅“”上的答案和评论

z-index
可能是最好的修复方法，但您也可以通过去掉标题上的clearfix来修复它-因此它会围绕其中的浮动元素折叠。该clearfix发生在Susy
容器
mixin中，因此您必须使用
设置容器宽度
（以及自动边距以使其在窗口中居中）。
谢谢。我尝试了您提到的上一种方法，但在使用
+设置容器宽度时（2）
header
上的
header
从susy的流中取出并固定在窗口的右侧。我也不明白为什么我要将
margin:auto
应用于
header
。当我这样做时，我的页眉会集中在页面上，而我不需要它。我还尝试添加
z-index:-1
>到
标题
，但这并没有使
标题
跨越2列。它仍然跨越与
.main
内容重叠的整个14列。如果仔细查看所提供的解决方案，它需要使用一些元素来跨越整个窗口，使用另一个元素来创建全宽容器，然后使用第三个e元素将跨度缩小到2列。这就是此解决方案的工作原理。您不希望
+设置容器宽度（2）
，您希望
+在一个元素上设置容器宽度
，以及
+跨度列（2）
z-index
是将包含元素的元素推到z轴后面的方式-即使它们横跨整个宽度，也不必碍事。我再次检查了代码，并将
z-index:-1
应用到
标题
发送到
.main
div后面。现在我可以使用c舔我所有的瓷砖都很好，但是现在
nav
和它的所有链接都卡在
后面了。page
。然后我尝试将
z-index:-2
应用到
。page
但是这也不起作用，因为
nav
的链接仍然不可点击。我用我的新代码更新了这个问题。如果你阅读了所有的评论，你会看到t最后的结论实际上是在
.main
上使用一个正的
z-index
以及
位置：relative
，而不是在标题上使用负的z-index。我用你的代码尝试了这一点（尽可能在不看到实际标记的情况下重新创建它），效果非常好。