如何在HTML中指定相对位置？

Question

我习惯于用XML设计Android布局，我想知道在我目前正在进行的HTML设计中是否有类似之处。特别是，我有：

-------------------------------------------
| <img src="logo.png"                     |
-------------------------------------------
|  n  |
|  a  |
|  v  |           Content
|  b  |
|  a  |
|  r  |

这是我正在研究的模板。在最初的，顶部的酒吧不是一个形象的标志，而是一个navbar-brand和所以一切似乎是很好地配合在一起。我把上面的“SB”换成了一个明显更大的标志(.png)。其效果是，相当多的内容以及"n“在侧肚脐已被掩盖。

我想弄清楚的是我如何能够指定相对位置，或者我应该如何布局这个页面，以便显示所有的内容？我正在寻找类似于XML中navbar:layout_below=logo.png类型的东西。

目前，我的解决方案是修改与导航栏和内容相关的.css，并给它们提供一个更高的“利润率最高”，但这似乎是解决这个问题的一种非常麻烦的方法。因此，我的问题是，是否有一种方法来指定HTML中的相对位置，或者我是否应该在本地机器上尝试和错误地使用边距，或者说，如何正确地布局，以便在我的示例中显示三个视图中的所有内容而不相互重叠？

<div id="wrapper"> 
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        <img src="logo.png" class="navbar-brand">
    </div> 

    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav"> <!-- This only looks ok if I change side-nav margin -->
            <li class="active"><a href="index.html">Dashboard</a></li>
            <li><a href="charts.html">Adoption</a></li>
            <li><a href="tables.html">Usage Statistics</a></li>
            <li><a href="forms.html">Classifiers</a></li>
        </ul>
    </div>

    <div class="container">
        <p>Hey</p> <!--this top here gets cut off-->
        <p>Hey</p>
        <p>What's up?</p>
        <p>What's up?</p>
    </div>
</div>

编辑:不一定是相对布局，我正在寻找避免硬编码裕度值的解决方案，这就是我目前正在做的事情，或者如果这不是一种糟糕的做法，我也会接受一个解释为什么不这样做的答案(也就是说，这样的解决方案会推广到所有屏幕大小吗？)

Answer 1

在使用固定到顶部的导航条时，需要将一些padding-top作为body的文档状态：

车身填充物所需 固定的导航栏将覆盖您的其他内容，除非您添加填充到顶部。尝试你自己的价值观，或者使用下面的片段。提示:默认情况下，导航条高50 is。

body { padding-top: 70px; }

随着文档的继续，非常重要的是

确保在核心引导CSS的之后包含此。

这样，您就不必单独为所有似乎被固定的肚脐“阻塞”的元素添加页边距顶部。