2

我有一个页面有 3div秒。“ divA”位于屏幕顶部。“ divB”位于屏幕的中心。

我想要做的是div始终根据div“B”的位置定位“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/

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

4

1 回答 1

3

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

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

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

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

于 2013-03-11T13:53:13.647 回答