html - 固定位置 div 与 'top' 相对于父 div

Question

基本 Bootstrap 模板 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”，但这不适用于 fixed位置

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

Answer 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 解决方案不会有这个问题。