2

I have a page where there are 3 divs. The div "A" is positioned at the screen's top. The div "B" is positioned in the screen's center.

What I want to do is position the div "C" always according to the position of div "B" (it's a responsive page).

Sample of desired outcome

This page is under Twitter Bootstrap.

<div class="container-fluid">

        <div class="row-fluid secao" id="secao-home">
            <div class="row-fluid">

                <div class="span12">
                    <p class="text-center" id="contato"><a href="#">A</a></p>                                               
                </div>

                <div class="span12" id="apoio">
                    C                                   
                </div>

                <div class="row-fluid">
                    <div class="span12 text-center" id="logo">

                        <nav id="mainNav">  
                            <ul>
                                <a href="#">1</a>
                                <a href="#">2</a>
                                <a href="#">3</a>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid secao" id="secao-carros">
            <div class="span12"></div>
        </div>


        <div class="row-fluid secao" id="secao-motos">
            <div class="span12"></div>
        </div>


        <div class="row-fluid secao" id="secao-nauticos">
            <div class="span12"></div>
        </div>


        <div class="row-fluid secao" id="secao-contato">
            <div class="span12"></div>
        </div>
    </div>

http://jsfiddle.net/dU9cZ/

Can someone tell me how to do it?

4

1 に答える 1

3

CSSでは、位置付けは、明示的に設定された属性absoluteを持つ最新の親または囲んでいる要素を基準にして機能します。ダイアグラムで「C」とラベル付けされたもののように、その位置を「B」のように別の位置に依存させpositionたい場合は、「C」を「C」の親にする必要があります。 「B」。divdiv

次に、「C」にのようなものを指定して、「B」の右側からの希望の距離と「C」の高さの値position:absolute;right:100px;top:-30px;をそれぞれ置き換えます。righttop

「B」にも明示的positionなlike position:relative（またはabsoluteその他の有効な値、明示的に設定することが重要）が指定されている場合、「C」の位置は「B」を基準にして定義されます。

absolute「C」が「B」に対して「相対的」である場合は、ではなく使用する必要があるように思われるかもしれrelativeませんが、これは、CSSが「相対的」を「相対的」を意味すると理解しているためです。要素がドキュメントフローで通常取る位置」。

于 2013-03-11T13:53:13.647 に答える