边距不适用于固定位置导航栏

【问题标题】：Margin not working with fixed position navigation bar边距不适用于固定位置导航栏
【发布时间】：2016-08-14 09:53:21
【问题描述】：

我正在尝试创建一个粘性导航栏。

到目前为止，我设法按照自己的意愿创建和设置栏。唯一的问题是边距。

我有正文的 CSS 代码：

body {
background: #202a2d;
padding: 1% 2% 0% 2%;
margin: 1% 2%;
}

导航栏定位：

.navigation_bar {
position: fixed;
width: 100%;
}

我知道当位置固定时，子（导航栏）应该忽略父（正文）的边距。 但是这里的孩子继承了左边距。另一方面，它忽略了右边距和下边距，因此它最终位于下方内容的顶部并填充了右侧的所有宽度。

我在这里找到了一些其他主题并尝试了一些建议的解决方案，但没有奏效。 所以我尝试了：

  • 在 navigation_bar 中设置边距但按预期不起作用
  • 设置左右但没有运气，只有其中一个可以正常工作
  • 设置类似 max-width: 1700px 这不是我想要的，因为它不适用于所有屏幕
  • 设置诸如 max-width: 93% 之类的东西，尽管它可以工作，但我认为这不是一个合适的解决方案，它仍然不能解决底部边距问题
  • 在导航中添加 padding-bottom 或 margin-bottom 以解决重叠问题，但它不起作用
  • 在导航栏周围添加一个包装器并在其中设置边距值，但还是没有运气

将位置设置为相对，一切看起来都不错，但它错过了粘性。

这是code。

那么，有人可以帮忙吗？

谢谢

【问题讨论】：

    标签： html css


    【解决方案1】：

    它不是应用margin-left，而是应用你在body 上设置的padding，因为你没有用top 和left 定位你的固定导航栏。 我不确定这是否是您想要的效果（导航栏最初不会覆盖您的内容），但最常见的方法是在您的身体上设置一个大于固定元素高度的padding-top，我还在您的固定导航上添加了顶部和左侧值。

    如果这是您要找的，请告诉我。我已将背景更改为浅色，以便轻松欣赏。 

    body {
  background: #eee;
  padding: 5% 2% 0% 2%;
  margin: 1% 2%;
}

.site_heading {
  color: #3a8ccf;
}

.navigation_bar {
  position: fixed;
  width: 100%;
  top: 1%;
  left: 2%;
  right: 2%;
  max-width: 96%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: #bfbfbf;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #47476b;
  color: #cc0066;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: #bfbfbf;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

p {
  overflow: hidden;
}
    <body>
  <header>
    <nav class="navigation_bar">
      <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li class="dropdown">
          <a href="#" class="dropbtn">Dropdown</a>
          <div class="dropdown-content">
            <a href="#">Link 3</a>
            <a href="#">Link .</a>
            <a href="#">Link 1</a>
            <a href="#">Link 4</a>
          </div>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <p>Lorem ipsum dolor sit amet, ut rebum indoctum corrumpit sed. Populo inermis atomorum te pri, vidisse commune in qui. Aliquid fierent ut sea, quo in quidam gubergren. Dicta prompta persecuti pro no. Graece deleniti constituam ut ius, quodsi salutandi
    vis ad, ad nisl nemore vituperata eum. Vis erat paulo scriptorem no. Nam ei falli putent, his elit malorum suscipit ne. Cum ne solum choro, ea sit paulo repudiare, aperiam delenit tibique ius te. Odio verear mel ne. Ut vim quis suscipit imperdiet.
    Eam posse ponderum expetendis te. Cum nonumy consetetur reprehendunt in. Fugit sonet theophrastus quo id. Habeo debitis ut sea, nam nulla legendos id. Eligendi epicurei molestiae sed ex, has nonumes corpora at. An meliore invenire aliquando mea. Cum
    ea errem ridens apeirian, nulla salutatus ei quo, postulant iudicabit iracundia an vix. Eu possit facete utroque usu. Iriure deseruisse cu mea. Esse integre definiebas an mei, prompta invidunt cu cum, vim in nonumy eligendi. Quo ne justo timeam accommodare,
    eu sea maiorum praesent. At eam accumsan repudiare. Vix ceteros consulatu et, est veri laboramus comprehensam ne. Quot oporteat pro ea, ea eum vide libris offendit. Nostrum percipit definitiones an quo, veri detracto quo ei. Cu mei docendi omnesque.
    Melius interesset est ut, per tincidunt vituperata cu. Quaeque admodum menandri ex pri, vix ex doming indoctum deterruisset. Id mei doctus explicari molestiae, dicant laudem est ne. Cum at facer paulo consul, at eros aliquam his. Mollis repudiare
    duo ex, id vel tollit accusam, mucius facilis corrumpit id mea. Altera consulatu vim no, suas natum nonumy sea te. Lorem ipsum dolor sit amet, ut rebum indoctum corrumpit sed. Populo inermis atomorum te pri, vidisse commune in qui. Aliquid fierent
    ut sea, quo in quidam gubergren. Dicta prompta persecuti pro no. Graece deleniti constituam ut ius, quodsi salutandi vis ad, ad nisl nemore vituperata eum. Vis erat paulo scriptorem no. Nam ei falli putent, his elit malorum suscipit ne. Cum ne solum
    choro, ea sit paulo repudiare, aperiam delenit tibique ius te. Odio verear mel ne. Ut vim quis suscipit imperdiet. Eam posse ponderum expetendis te. Cum nonumy consetetur reprehendunt in. Fugit sonet theophrastus quo id. Habeo debitis ut sea, nam
    nulla legendos id. Eligendi epicurei molestiae sed ex, has nonumes corpora at. An meliore invenire aliquando mea. Cum ea errem ridens apeirian, nulla salutatus ei quo, postulant iudicabit iracundia an vix. Eu possit facete utroque usu. Iriure deseruisse
    cu mea. Esse integre definiebas an mei, prompta invidunt cu cum, vim in nonumy eligendi. Quo ne justo timeam accommodare, eu sea maiorum praesent. At eam accumsan repudiare. Vix ceteros consulatu et, est veri laboramus comprehensam ne. Quot oporteat
    pro ea, ea eum vide libris offendit. Nostrum percipit definitiones an quo, veri detracto quo ei. Cu mei docendi omnesque. Melius interesset est ut, per tincidunt vituperata cu. Quaeque admodum menandri ex pri, vix ex doming indoctum deterruisset.
    Id mei doctus explicari molestiae, dicant laudem est ne. Cum at facer paulo consul, at eros aliquam his. Mollis repudiare duo ex, id vel tollit accusam, mucius facilis corrumpit id mea. Altera consulatu vim no, suas natum nonumy sea te. Lorem ipsum
    dolor sit amet, ut rebum indoctum corrumpit sed. Populo inermis atomorum te pri, vidisse commune in qui. Aliquid fierent ut sea, quo in quidam gubergren. Dicta prompta persecuti pro no. Graece deleniti constituam ut ius, quodsi salutandi vis ad, ad
    nisl nemore vituperata eum. Vis erat paulo scriptorem no. Nam ei falli putent, his elit malorum suscipit ne. Cum ne solum choro, ea sit paulo repudiare, aperiam delenit tibique ius te. Odio verear mel ne. Ut vim quis suscipit imperdiet. Eam posse
    ponderum expetendis te. Cum nonumy consetetur reprehendunt in. Fugit sonet theophrastus quo id. Habeo debitis ut sea, nam nulla legendos id. Eligendi epicurei molestiae sed ex, has nonumes corpora at. An meliore invenire aliquando mea. Cum ea errem
    ridens apeirian, nulla salutatus ei quo, postulant iudicabit iracundia an vix. Eu possit facete utroque usu. Iriure deseruisse cu mea. Esse integre definiebas an mei, prompta invidunt cu cum, vim in nonumy eligendi. Quo ne justo timeam accommodare,
    eu sea maiorum praesent. At eam accumsan repudiare. Vix ceteros consulatu et, est veri laboramus comprehensam ne. Quot oporteat pro ea, ea eum vide libris offendit. Nostrum percipit definitiones an quo, veri detracto quo ei. Cu mei docendi omnesque.
    Melius interesset est ut, per tincidunt vituperata cu. Quaeque admodum menandri ex pri, vix ex doming indoctum deterruisset. Id mei doctus explicari molestiae, dicant laudem est ne. Cum at facer paulo consul, at eros aliquam his. Mollis repudiare
    duo ex, id vel tollit accusam, mucius facilis corrumpit id mea. Altera consulatu vim no, suas natum nonumy sea te. Lorem ipsum dolor sit amet, ut rebum indoctum corrumpit sed. Populo inermis atomorum te pri, vidisse commune in qui. Aliquid fierent
    ut sea, quo in quidam gubergren. Dicta prompta persecuti pro no. Graece deleniti constituam ut ius, quodsi salutandi vis ad, ad nisl nemore vituperata eum. Vis erat paulo scriptorem no. Nam ei falli putent, his elit malorum suscipit ne. Cum ne solum
    choro, ea sit paulo repudiare, aperiam delenit tibique ius te. Odio verear mel ne. Ut vim quis suscipit imperdiet. Eam posse ponderum expetendis te. Cum nonumy consetetur reprehendunt in. Fugit sonet theophrastus quo id. Habeo debitis ut sea, nam
    nulla legendos id. Eligendi epicurei molestiae sed ex, has nonumes corpora at. An meliore invenire aliquando mea. Cum ea errem ridens apeirian, nulla salutatus ei quo, postulant iudicabit iracundia an vix. Eu possit facete utroque usu. Iriure deseruisse
    cu mea. Esse integre definiebas an mei, prompta invidunt cu cum, vim in nonumy eligendi. Quo ne justo timeam accommodare, eu sea maiorum praesent. At eam accumsan repudiare. Vix ceteros consulatu et, est veri laboramus comprehensam ne. Quot oporteat
    pro ea, ea eum vide libris offendit. Nostrum percipit definitiones an quo, veri detracto quo ei. Cu mei docendi omnesque. Melius interesset est ut, per tincidunt vituperata cu. Quaeque admodum menandri ex pri, vix ex doming indoctum deterruisset.
    Id mei doctus explicari molestiae, dicant laudem est ne. Cum at facer paulo consul, at eros aliquam his. Mollis repudiare duo ex, id vel tollit accusam, mucius facilis corrumpit id mea. Altera consulatu vim no, suas natum nonumy sea te.</p>
  <p>Lorem ipsum dolor sit amet, ut rebum indoctum corrumpit sed. Populo inermis atomorum te pri, vidisse commune in qui. Aliquid fierent ut sea, quo in quidam gubergren. Dicta prompta persecuti pro no. Graece deleniti constituam ut ius, quodsi salutandi
    vis ad, ad nisl nemore vituperata eum. Vis erat paulo scriptorem no. Nam ei falli putent, his elit malorum suscipit ne. Cum ne solum choro, ea sit paulo repudiare, aperiam delenit tibique ius te. Odio verear mel ne. Ut vim quis suscipit imperdiet.
    Eam posse ponderum expetendis te. Cum nonumy consetetur reprehendunt in. Fugit sonet theophrastus quo id. Habeo debitis ut sea, nam nulla legendos id. Eligendi epicurei molestiae sed ex, has nonumes corpora at. An meliore invenire aliquando mea. Cum
    ea errem ridens apeirian, nulla salutatus ei quo, postulant iudicabit iracundia an vix. Eu possit facete utroque usu. Iriure deseruisse cu mea. Esse integre definiebas an mei, prompta invidunt cu cum, vim in nonumy eligendi. Quo ne justo timeam accommodare,
    eu sea maiorum praesent. At eam accumsan repudiare. Vix ceteros consulatu et, est veri laboramus comprehensam ne. Quot oporteat pro ea, ea eum vide libris offendit. Nostrum percipit definitiones an quo, veri detracto quo ei. Cu mei docendi omnesque.
    Melius interesset est ut, per tincidunt vituperata cu. Quaeque admodum menandri ex pri, vix ex doming indoctum deterruisset. Id mei doctus explicari molestiae, dicant laudem est ne. Cum at facer paulo consul, at eros aliquam his. Mollis repudiare
    duo ex, id vel tollit accusam, mucius facilis corrumpit id mea. Altera consulatu vim no, suas natum nonumy sea te. Lorem ipsum dolor sit amet, ut rebum indoctum corrumpit sed. Populo inermis atomorum te pri, vidisse commune in qui. Aliquid fierent
    ut sea, quo in quidam gubergren. Dicta prompta persecuti pro no. Graece deleniti constituam ut ius, quodsi salutandi vis ad, ad nisl nemore vituperata eum. Vis erat paulo scriptorem no. Nam ei falli putent, his elit malorum suscipit ne. Cum ne solum
    choro, ea sit paulo repudiare, aperiam delenit tibique ius te. Odio verear mel ne. Ut vim quis suscipit imperdiet. Eam posse ponderum expetendis te. Cum nonumy consetetur reprehendunt in. Fugit sonet theophrastus quo id. Habeo debitis ut sea, nam
    nulla legendos id. Eligendi epicurei molestiae sed ex, has nonumes corpora at. An meliore invenire aliquando mea. Cum ea errem ridens apeirian, nulla salutatus ei quo, postulant iudicabit iracundia an vix. Eu possit facete utroque usu. Iriure deseruisse
    cu mea. Esse integre definiebas an mei, prompta invidunt cu cum, vim in nonumy eligendi. Quo ne justo timeam accommodare, eu sea maiorum praesent. At eam accumsan repudiare. Vix ceteros consulatu et, est veri laboramus comprehensam ne. Quot oporteat
    pro ea, ea eum vide libris offendit. Nostrum percipit definitiones an quo, veri detracto quo ei. Cu mei docendi omnesque. Melius interesset est ut, per tincidunt vituperata cu. Quaeque admodum menandri ex pri, vix ex doming indoctum deterruisset.
    Id mei doctus explicari molestiae, dicant laudem est ne. Cum at facer paulo consul, at eros aliquam his. Mollis repudiare duo ex, id vel tollit accusam, mucius facilis corrumpit id mea. Altera consulatu vim no, suas natum nonumy sea te. Lorem ipsum
    dolor sit amet, ut rebum indoctum corrumpit sed. Populo inermis atomorum te pri, vidisse commune in qui. Aliquid fierent ut sea, quo in quidam gubergren. Dicta prompta persecuti pro no. Graece deleniti constituam ut ius, quodsi salutandi vis ad, ad
    nisl nemore vituperata eum. Vis erat paulo scriptorem no. Nam ei falli putent, his elit malorum suscipit ne. Cum ne solum choro, ea sit paulo repudiare, aperiam delenit tibique ius te. Odio verear mel ne. Ut vim quis suscipit imperdiet. Eam posse
    ponderum expetendis te. Cum nonumy consetetur reprehendunt in. Fugit sonet theophrastus quo id. Habeo debitis ut sea, nam nulla legendos id. Eligendi epicurei molestiae sed ex, has nonumes corpora at. An meliore invenire aliquando mea. Cum ea errem
    ridens apeirian, nulla salutatus ei quo, postulant iudicabit iracundia an vix. Eu possit facete utroque usu. Iriure deseruisse cu mea. Esse integre definiebas an mei, prompta invidunt cu cum, vim in nonumy eligendi. Quo ne justo timeam accommodare,
    eu sea maiorum praesent. At eam accumsan repudiare. Vix ceteros consulatu et, est veri laboramus comprehensam ne. Quot oporteat pro ea, ea eum vide libris offendit. Nostrum percipit definitiones an quo, veri detracto quo ei. Cu mei docendi omnesque.
    Melius interesset est ut, per tincidunt vituperata cu. Quaeque admodum menandri ex pri, vix ex doming indoctum deterruisset. Id mei doctus explicari molestiae, dicant laudem est ne. Cum at facer paulo consul, at eros aliquam his. Mollis repudiare
    duo ex, id vel tollit accusam, mucius facilis corrumpit id mea. Altera consulatu vim no, suas natum nonumy sea te. Lorem ipsum dolor sit amet, ut rebum indoctum corrumpit sed. Populo inermis atomorum te pri, vidisse commune in qui. Aliquid fierent
    ut sea, quo in quidam gubergren. Dicta prompta persecuti pro no. Graece deleniti constituam ut ius, quodsi salutandi vis ad, ad nisl nemore vituperata eum. Vis erat paulo scriptorem no. Nam ei falli putent, his elit malorum suscipit ne. Cum ne solum
    choro, ea sit paulo repudiare, aperiam delenit tibique ius te. Odio verear mel ne. Ut vim quis suscipit imperdiet. Eam posse ponderum expetendis te. Cum nonumy consetetur reprehendunt in. Fugit sonet theophrastus quo id. Habeo debitis ut sea, nam
    nulla legendos id. Eligendi epicurei molestiae sed ex, has nonumes corpora at. An meliore invenire aliquando mea. Cum ea errem ridens apeirian, nulla salutatus ei quo, postulant iudicabit iracundia an vix. Eu possit facete utroque usu. Iriure deseruisse
    cu mea. Esse integre definiebas an mei, prompta invidunt cu cum, vim in nonumy eligendi. Quo ne justo timeam accommodare, eu sea maiorum praesent. At eam accumsan repudiare. Vix ceteros consulatu et, est veri laboramus comprehensam ne. Quot oporteat
    pro ea, ea eum vide libris offendit. Nostrum percipit definitiones an quo, veri detracto quo ei. Cu mei docendi omnesque. Melius interesset est ut, per tincidunt vituperata cu. Quaeque admodum menandri ex pri, vix ex doming indoctum deterruisset.
    Id mei doctus explicari molestiae, dicant laudem est ne. Cum at facer paulo consul, at eros aliquam his. Mollis repudiare duo ex, id vel tollit accusam, mucius facilis corrumpit id mea. Altera consulatu vim no, suas natum nonumy sea te.</p>
</body>

</html>

    【讨论】：

    • 嗨，胡安，感谢您的回答。这部分是我想做的。我将其余内容（段落）包装到一个 div 中，我按照您的建议使用 padding-top 对其进行样式设置，并且该栏不再与它重叠。但我不想删除边距。我希望身体周围有一些空白空间，而不是填满整个宽度。我希望导航栏左右都有 2% 的边距。
    • 我刚刚添加了left:2% 和right: 2% 以及max-width: 96%，所以你的固定元素有你想要的边距。我还留下了top: 1%，以防您发送的正文顶部边距也应该在您的固定元素上，但请随意删除它。这是否如您所愿？
    • 天哪，现在我觉得自己很愚蠢。我尝试了左/右和最大宽度，但从未将它们组合在一起。我知道这会是一件简单的事情，但没想到会这么简单。这正是我想要的。非常感谢。
    猜你喜欢
    • 2016-10-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-15
    • 2020-06-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode