如何使 Semantic-UI 中的固定顶部菜单不覆盖内容答案

【问题标题】：How to make fixed top menu in Semantic-UI not cover content如何使 Semantic-UI 中的固定顶部菜单不覆盖内容
【发布时间】：2016-03-20 02:16:31
【问题描述】：

我在语义 UI 中的固定顶部菜单有问题。它覆盖了一个标题元素，上面写着“这是 Stoga Hub”。我认为 javascript 或 jQuery 不会有任何帮助。我已经尝试过为菜单和标题元素使用 margin-top/bottom 并且它有效，但我知道如果我必须调整每个网页上的 margin-top/bottom，我的代码会变得非常混乱。如果这有一个非常简单的答案，我深表歉意，我对网站建设还是很陌生。谢谢大家的帮助。

var main = function() {
  $('.ui.dropdown').dropdown({
    on: 'hover'
  });
  $('.item').click(function() {
    $('.item').removeClass('active');
    $(this).toggleClass('active');
  });
  $('.ui.checkbox')
    .checkbox();
};
$(document).ready(main);

.main {
  height: 600px;
  background: linear-gradient(to right, #16a085, #2c3e50);
  position: absolute;
  /*margin-top: 78px;*/
}

.ui.header {
  font-size: 65px;
}

body {
  background-color: #ecf0f1;
  color: white;
}

.segment {
  background-position: 50% 50%;
  margin: auto;
}

.menu {
  padding-top: 8px;
  padding-bottom: 8px;
  color: maroon;
  position: relative;
  /*margin-bottom: 62px;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Menu -->
<div class="ui large top fixed transparent menu">
  <div class="ui container">
    <a class="active item">"Logo"</a>
    <div class="ui dropdown item">
      <div class="text">Members</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item" href="http://tesd.net/stoga">CHS Website</a>
        <a class="item" href="http://stogamusic.com">Stoga Music</a>
        <a class="item" href="http://stoga.net">Stoga Library Index</a>
        <a class="item" href="http://spoke.news">Spoke News</a>
      </div>
    </div>
    <div class="ui dropdown item">
      <div class="text">Clubs</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item" href="../Main%20Files/clubs.html">Club List</a>
        <a class="item">Register a Club</a>
      </div>
    </div>
    <div class="ui dropdown item">
      <div class="text">Useful Stuff</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item" href="https://pinnacle.tesd.net/Pinnacle/PIV/Logon.aspx?ReturnUrl=%2fPinnacle%2fPIV%2fDefault.aspx">Pinnacle</a>
        <a class="item" href="https://connection.naviance.com/family-connection/auth/login/?hsid=conestoga">Naviance</a>
      </div>
    </div>
    <div class="ui dropdown item">
      <div class="text">About</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item" href="../Main%20Files/whoWeAre.html">Who We Are</a>
        <a class="item" href="../Main%20Files/Calendar.html">Calendar</a>
        <a class="item" href="../Main%20Files/contact.html">Contact Us</a>
      </div>
    </div>
    <div class="right menu">
      <a class="item"><i class="sign in icon"></i>Login</a>
    </div>
  </div>
</div>

<div class="ui fluid main container">
  <div class="segment">
    <div class="ui container">
      <h1 class="ui header">This is Stoga Hub</h1>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css semantic-ui

【解决方案1】：

我认为最简单的方法可能是 padding-top：

.main.container {
    padding-top: 100px;
}

JS Fiddle链接

【讨论】：

【解决方案2】：

我看到你在 main 上尝试了 margin-top。尝试“top：78px”，因为它是绝对定位的。如果你总是有一个顶部有文字的段，你也可以试试

.segment {
    margin: 100px auto 0;
}

这将在段的顶部添加额外的边距，因此文本不会被压在标题上。（带有“auto”的边距仅适用于侧面，而不适用于顶部和底部。）您也可以在 .main 或 .segment 中使用“padding-top”。

【讨论】：