Question

两个Div，彼此重叠。如果我在main-wrap-inner div上添加一些填充，则它不重叠。但填充对所有浏览器来说并不富有成效。

我有这个HTML：

<div class="main-wrap">
  <div class="main-wrap-inner">
      <nav class="navbar aog-navbar"></nav>
  </div>
  <div id="fullpage" class="container charity-content">
     <section></section>
     <section></section>
  </div>
</div>

CSS是：

    .main-wrap {
        background: #ffffff none repeat scroll 0 0;
        clear: both;
        margin: 0;
        min-height: 100%;
        overflow: visible;
        padding: 0;
        position: relative;
    }
    .main-wrap-inner {
        clear: both;
        height: 100%;
        min-height: 86px;
        padding: 0;
        position: relative;
        width: 100%;
    }
    .main-wrap-inner {
        height: auto;
        min-height: inherit;
      }
  .aog-navbar {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #fff;
        border-color: -moz-use-text-color -moz-use-text-color #ddd;
        border-image: none;
        border-style: none none solid;
        border-width: 0 0 1px;
        min-height: 100px;
        z-index: 99;
    }
    .navbar {
            margin-bottom: 20px;
            position: fixed;
    }

.charity-content, .charity-content .container {
    max-width: 1220px;
    width: 100%;
}
.charity-content {
    padding-left: 0;
    padding-right: 0;
}

现在问题是div fullpage位于div下main-wrap-inner。我该如何保护这种重叠？

Answer 1

这很好，因为.navbar有position:fixed并且它依赖于文档而不是它的容器，即使您在position:relative上设置了.main-wrap

position:fixed从其容器中获取元素。所以它重叠了一切。

我看到您在min-height:100px;上设置了.aog-navbar，因此您应该在margin-top或100px上设置.charity-content最小#fullpage格

请参阅下面的代码段。让我知道它是否有帮助

要详细了解position，请参阅此处： CSS position

＆＃13;

.main-wrap {
        background: #ffffff none repeat scroll 0 0;
        clear: both;
        margin: 0;
        min-height: 100%;
        overflow: visible;
        padding: 0;
        position: relative;
    }
    .main-wrap-inner {
        clear: both;
        height: 100%;
        min-height: 86px;
        padding: 0;
        position: relative;
        width: 100%;
    }
    .main-wrap-inner {
        height: auto;
        min-height: inherit;
      }
  .aog-navbar {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #fff;
        border-color: -moz-use-text-color -moz-use-text-color #ddd;
        border-image: none;
        border-style: none none solid;
        border-width: 0 0 1px;
        min-height: 100px;
        z-index: 99;
    }
    .navbar {
            margin-bottom: 20px;
            position: fixed;
    }

.charity-content, .charity-content .container {
    max-width: 1220px;
    width: 100%;
}
.charity-content {
    padding-left: 0;
    padding-right: 0;
    margin-top:100px;
}

＆＃13;

<div class="main-wrap">
  <div class="main-wrap-inner">
      <nav class="navbar aog-navbar">navbar here</nav>
  </div>
  <div id="fullpage" class="container charity-content">
     <section>section1</section>
     <section>section2</section>
  </div>
</div>

＆＃13;

我怎样才能保护html元素重叠？

1 个答案: