相对于父 div 具有“顶部”的固定位置 div答案

【问题标题】：Fixed position div with 'top' relative to parent div相对于父 div 具有“顶部”的固定位置 div
【发布时间】：2013-06-23 15:08:38
【问题描述】：

基本引导模板here 在顶部有一个固定栏。我想在它的正下方放置一个div。

这是该栏的 HTML（直接从页面的源代码复制，因此有 CSS 类引用）：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse collapse" style="height: 0px;">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form pull-right">
          <input type="text" placeholder="Email" class="span2">
          <input type="password" placeholder="Password" class="span2">
          <button class="btn" type="submit">Sign in</button>
        </form>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

这是我在 div 下的尝试：

<div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;">Hello</div>

它几乎可以工作，但问题是'top：40px;'。当您调整屏幕大小时，顶部的固定栏会改变高度。

如何使它始终位于栏杆的正下方，而不管栏杆的高度如何？如何在不使用<center>的情况下将其水平居中的加分点

编辑：对于水平居中的事情，我尝试将我的 div 包装在一个宽度为 100% 的 div 中，然后向其中添加 'margin:0 auto' ，但这不适用于固定位置

Edit2：here 是 jsfiddle。 html 的第 38 行是我的尝试，上面的所有内容都是导航栏 div。

【问题讨论】：

你的 html 行放在哪里？
直接在我粘贴的那个更大的 div 下方

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

如果你已经在使用 jQuery，你可以使用这样的东西：

Working Example

Full screen example

x = (function() {
var t = $('.navbar').height();
var c = $(window).width() / 2 - $('.new').width() / 2;
    $('.new').css({
        top: t,
        left: c
    });
});

$(document).ready(x);
$(window).resize(x);

注意：更新了带有媒体查询的示例，以更好地展示脚本的效果。

当然，你可以单独使用 CSS 来做到这一点，但你需要像这样使用媒体查询：

CSS only working example

.new {
    position:fixed;
    margin: 0 auto;
    top: 51px;
    left:0;
    right:0;
    background-color:#CF4342;
    color:#fff;
    z-index:5000;
    width:50px;
}
@media (max-width: 979px) {
    .new {
        top: 61px;
    }
}

请注意，如果您将屏幕缩小得太远，仅 css 的解决方案将“中断”。 jQuery解决方案不会有这个问题。

【讨论】：

为什么要依赖 js 来完成可以用纯 css 做的事情？导航栏高度是固定的，因此不值得计算，并且使用固定宽度的元素很容易水平居中。 jsfiddle.net/Pevara/MgcDU/5405
我想只使用 CSS，但使用 JS 感觉更安全。当您调整浏览器大小以增加导航栏的高度时，您的 CSS 解决方案不起作用。

【解决方案2】：

尝试在您的 css 中添加这一行或编辑引导 css 文件中的类。确保您的 css 文件位于引导 css 文件下，以防您选择将其添加到自己的文件中。有意义吗？

.navbar-fixed-top { margin-bottom: 0 !important; }

【讨论】：

我只是尝试将内联添加到大 div 以对其进行测试。没用。
很难帮助你不知道 a) 你将 css 类放在哪里 b) 实时查看 html 和 css。你能创建一个jsfiddle吗？

【解决方案3】：

Bootstrap 在documentation 中说：

添加 .navbar-fixed-top 并记住要考虑隐藏区域通过在<body> 中添加至少 40 像素的内边距，在其下方。确定在核心 Bootstrap CSS 之后和可选之前添加它响应式 CSS。

所以这就是我会尝试的......

我更新了你的小提琴来演示http://jsfiddle.net/Pevara/MgcDU/5403/
我做了以下事情：
- 将你的“你好”移动到带有英雄单位的容器内
- 删除了“你好”上的定位
- 移除了您在 .container 上设置的 10px 边距
- 按照 Bootstrap 的建议，将以下内容添加到您的 CSS 中

body {
    padding-top: 40px;
}

【讨论】：

（感谢有用的提示）