Question

我的header跨越div.page容器的整个宽度（14列）。我的Susy网格是14列宽。所以现在当我尝试点击检查Google Dev Tools中header元素下的其他页面元素时，我根本不能。我只能访问header。

下面你可以看到header，它有一个半透明的粉红色background-color。每当我点击其中一个绿色的div时，我就会点击header。

enter image description here

我希望该标题仅覆盖页面的前两个左列。问题是我需要有一个固定的位置header，其中包含我的h1标题和nav所以我需要一个类似于Eric Meyer的新container上下文在这里做了

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)

Answer 1

查看“A `position:fixed` sidebar whose width is set in percentage?”的答案和评论。

z-index可能是最好的解决方案，但您也可以通过删除标题上的clearfix来修复它 - 因此它会在其中的浮动元素周围折叠。那个clearfix正在Susy container mixin中发生，因此您必须使用set-container-width代替（以及自动边距将其置于窗口中心。

如何使我的<header>仅跨越2个网格单位并将其位置固定在Susy Compass？</header>

更新

1 个答案: