根据另一个div定位div

Question

我有一个页面，其中有3 div个。 div“A”位于屏幕顶部。 div“B”位于屏幕中央。

我想要做的是始终根据div“B”的位置定位div“C”（这是一个响应页面）。

此页面位于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/

有人可以告诉我该怎么做吗？

Answer 1

在CSS中，absolute定位相对于具有显式设置position属性的最新父级或封闭元素起作用。如果你想要一个给定的div，比如图中标有“C”的那个，要让它的位置依赖于另一个div，就像“B”那样，你应该把“B”作为父级通过在“B”中放置“C”来表示“C”。

然后，您可以为“C”提供类似position:absolute;right:100px;top:-30px;的内容，将right和top的值替换为“B”右侧所需的距离和“{1}}的高度” C“，分别。

如果还为“B”提供了明确的position，例如position:relative（或absolute或任何其他有效值，重要的是您明确设置它），那么“C”将相对于“B”定义。

你应该使用absolute而不是relative似乎有点反直觉，当你想要的是“C”是“相对”到“B”，但原因是这就是CSS理解“相对”意味着“相对于元素在文档流中通常会采取的位置”。