Маржа не работает с навигационной панелью с фиксированной позицией

Я пытаюсь создать липкую навигационную панель.Маржа не работает с навигационной панелью с фиксированной позицией

До сих пор мне удалось создать и создать планку так же, как я хочу. Единственная проблема - это маржа.

У меня есть, что 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-bot том или краю дна в нав для перекрытия проблемы, но это не сработало
добавив обертки вокруг навигационной панели и установите значения полей в нем, но опять-таки не повезло

С набором позиции к относительному, все выглядит хорошо, но это не соответствует точке липкости.

Вот code.

Так может ли кто-нибудь помочь?

Благодаря

источник

2016-08-14 Yannis Krz

Это не применяя margin-left, это применяя padding вы установили на body как вы не positionated вашей неподвижной панели навигации с top и left. Я не уверен, что это тот эффект, который вы намереваетесь (для того, чтобы навигационная панель не перекрывала ваш контент изначально), но наиболее распространенным способом является установка padding-top на ваше тело, которое больше высоты вашего фиксированного элемента, и Я также добавил верхние и левые значения на вашем фиксированном nav.

Сообщите мне, если это то, что вы ищете. Я изменил фон на светлый цвет, поэтому его можно легко оценить.

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>

источник

2016-08-14 10:38:23

Привет Хуан, спасибо за ответы. Это было отчасти то, что я хотел сделать.Я завернул оставшуюся часть содержимого (абзацы) в div, который я создал с помощью padding-top, как вы предлагали, и панель больше не накладывается на нее. Но я не хочу убирать маржу. Я хочу, чтобы тело имело пустое пространство вокруг него и не заполняло всю ширину. Я хочу, чтобы панель навигации имела 2% -ный запас как слева, так и справа. –

Я только что добавил 'left: 2%' и 'right: 2%', а также 'max-width: 96%', поэтому ваш фиксированный элемент имеет тот марж, который вы хотите. Я также оставил 'top: 1%' в случае, если высвобождаемое поле тела, которое вы отправили, должно также находиться на вашем фиксированном элементе, но не стесняйтесь удалять его в противном случае. Это работает так, как вы планировали? –

Гоша, теперь я чувствую себя глупо. Я пробовал как левую/правую, так и максимальную ширину, но не комбинировал их вместе. Я знал, что это будет что-то простое, протискивающее мой разум, но не думал, что все будет так просто. Это именно то, чего я хотел. Большое спасибо. –

Маржа не работает с навигационной панелью с фиксированной позицией

ответ

Смежные вопросы