我有一个header跨越其div.page容器的全宽（14 列）。我的 Susy 网格有 14 列宽。因此，现在当我尝试单击以检查headerGoogle 开发工具中的元素下的其他页面元素时，我根本做不到。我只能访问header.
下面你可以看到header它有一个半透明的粉红色background-color。每次我点击div顶部的绿色 s 之一，我都会点击header.
我想要的是该标题仅跨越页面的前两列。问题是我需要一个header包含我的h1标题的固定位置，nav所以我需要一个container类似于 Eric Meyer 在这里所做的新上下文
https://groups.google.com/forum/?fromgroups#!topic/compass-users/A2rFv2ihwas
我真的不明白我在这里做错了什么。有没有办法解决这个问题？
我的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到header元素以将其发送到我所有的绿色 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)