css - 根据另一个 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 中，绝对 定位相对于具有显式设置的 position 属性的最近父元素或封闭元素起作用。如果您希望给定的 div(例如图中标有“C”的那个)的位置取决于另一个 div(例如“B”的位置)，您应该通过将“C”放在“B”中，使“B”成为“C”的父级。

然后你可以给 "C"类似 position:absolute;right:100px;top:-30px; 的值，替换 right 和 top 的值 分别设置与“B”右侧的所需距离和“C”的高度。

如果“B”也被赋予一个明确的position，比如position:relative(或absolute或任何其他有效值，重要的是你明确设置它)，那么“C”的位置将相对于“B”定义。

您应该使用 absolute 而不是 relative 似乎有点违反直觉，当您希望“C”相对于“B”时”，但这是因为 CSS 将“相对”理解为“相对于元素通常在文档流中所处的位置”。