Question

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

到目前为止，我设法按照我想要的方式创建和设置条形图。唯一的问题是保证金。

我有身体的CSS代码：

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

和导航栏定位：

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

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

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

在navigation_bar中设置边距，但在“不工作”
设置左右但没有运气，只有其中一个能正常工作
设置类似max-width：1700px的东西，这不是我正在寻找的东西，因为它不能在所有屏幕上工作
设置最大宽度：93％，即使它有效，我也不认为它是一个合适的解决方案，但它仍然没有解决底部边际问题
在导航中添加填充底部或边距底部以解决重叠问题，但它没有工作
在导航栏周围添加一个包装器并在其中设置边距值，但再次没有运气

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

这里是code。

那么，有人可以帮忙吗？

由于

Answer 1

它没有应用padding，它正在应用您在body上设置的top，因为您没有使用left和{{定位固定导航栏1}}。我不确定这是否是您想要的效果（导航栏最初不会覆盖您的内容），但最常见的方法是在您的身体上设置一个大于固定元素的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>

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

1 个答案: