9

position: fixedビューポートの代わりに要素を相対的に作成することは知っていますが、スペースoffsetParentを消費するサイド要素とx、残りのビューポート幅のパーセンテージを占める固定位置の見出し要素があるという問題があります。

フィドルを参照してください: http://jsfiddle.net/U5DSZ/

これで、すべてのh1要素を独自のコンテナに入れることができましたが、コンテンツに関連付けられなくなったため、セマンティックな意味が失われました。

JavaScript がこれを行うことができることは理解していますが、ページ構造に JavaScript を使用することに反対です。

純粋に HTML または CSS の方法でこれを行う方法はありますか? h1要素がコンテンツとの関係を維持し、コンテンツが静的に配置されている限り、要素を移動してもかまいません。

4

2 に答える 2

7

次のようにして、必要な効果を得ることができます。

HTML スニペットはそのままで問題ありません:

<div id="content">
    <section>
        <h1>Heading 1</h1>
        <p>...</p>
    </section>
    <section>
        <h1>Heading 2</h1>
        <p>...</p>
    </section>
</div>

CSSは優れていますが、説明が必要です。

#content {
    overflow: visible; /* default, but important to notice */
}

section {
    float: left;
    width: 25%;
}

h1 {
    position: fixed;
    width: 25%;
    background: #00FF00;
    text-align: center;
}

およびデモ フィドル: http://jsfiddle.net/audetwebdesign/4zLMq/

仕組み

ブロックは、 200px#contentの左フローティング サイドバーの右側の残りの幅を占有します。

内には、親コンテナーの 25% (この場合はビューポート パネルの幅) を占める #content2 つの左フローティング要素があります。section

子h1要素には がposition: fixedあります。つまり、25% の幅もビューポートの幅に基づいて計算されます (ではありません#content)。

ケース 1同じ幅にし
たい場合 は、同じ包含ブロック (この場合はビュー ポート) から計算された同じ相対値 (25%) が必要です。h1#content

ただし、25% という値は、フローティング サイドバーを考慮した後の残りのスペースの 25% ではありません。しかし、多分あなたはこれと一緒に暮らすことができます。

ケース 2
サイドバーの幅を相対的な値に設定すると、幅の値を判断しやすくなります。混合単位の使用は常に問題です。

于 2013-06-03T16:07:05.943 に答える