1

GumbyFrameworksの「スキップリンク」アンカーリンクソリューションでCSSを使用して固定位置ヘッダーを調整する方法があるかどうかを確認しようとしています。

負のマージンでレイヤーをプッシュダウンしようとしました。また、CSSを使用してデータ型属性をターゲットにしようとしましたが無駄になりました。私がこれまでに試したことはすべて、ページ自体のdivも移動しました。

私のヘッダーの高さは682pxに固定されており、それより下のすべてのコンテンツを保持し、リンクのスキップ機能を引き続き機能させる方法を見つけたいと思います。

任意の提案をいただければ幸いです！

リンク例

ヘッダーCSS：

body {
    padding-top:268px !important;
}

.fixed_header {
    width: 100%;
    height: 268px;
    background: url(../img/green_header_grad.png) repeat-x;
    ;
    position: fixed;
    text-align: center;
    z-index: 999;
    border-bottom: 1px solid #FEFEF4;
    -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    top: 0px;
}
4

3 に答える 3

1 
body {
    padding-top:234px;
}
于 2013-01-20T02:47:39.700 に答える
1

（style.css行149）margin-top: -268px;から削除します。例：span.anchor

span.anchor {
    display: block;
    height: 268px;
    visibility: hidden;
}
于 2013-01-26T14:05:52.090 に答える
1

本体のマージン値を変更するか、固定ヘッダーの高さに一致するようにオフセットを挿入することが、最初のステップにすぎません。

うまくいくように見えるのは、スキップしたいレイヤーの内側にあるスパン内でデータ型属性を移動することです。次に、スパンには絶対位置が必要であり、ヘッダー（-286px）と一致するように負の値またはオフセットを適用する必要があります。

HTML：

<div class="four columns sidebar"">
<span class="anchor" id="founder" data-type="skiplink_3"></span>
</div>
<div class="eleven columns main_col"></div>
</div>

CSS：

span.anchor {
position:absolute;
top: -268px;
display: block;
visibility: hidden;
}
于 2013-01-26T15:00:33.027 に答える