Flexbox affected by margin afterwards

Multi tool use
I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin
of the title div
somehow affected the positioning of the navigation bar.
I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br>
after the navigation bar, it worked, but I think it is not elegant.
Is there a better method to achieve what I want?
Below is my simplified HTML code:
<header id='navbar-bg'>
<div id='navbar'>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</header>
<div id='body'>
<h1 id='search-title'>This is a title</h1>
</div>
And the CSS style:
#navbar-bg {
position: fixed;
width: 100%;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
}
Since the position of #navbar-bg
is fixed, I want the navigation bar as a whole to be fixed, and the margin-top
of #body
should not affect the navigation bar. Yet the margin-top
moved both the #body
and the navigation bar down, which is strange.
I want to fix this problem using an elegant solution, not adding a <br>
after header
.
html css
add a comment |
I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin
of the title div
somehow affected the positioning of the navigation bar.
I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br>
after the navigation bar, it worked, but I think it is not elegant.
Is there a better method to achieve what I want?
Below is my simplified HTML code:
<header id='navbar-bg'>
<div id='navbar'>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</header>
<div id='body'>
<h1 id='search-title'>This is a title</h1>
</div>
And the CSS style:
#navbar-bg {
position: fixed;
width: 100%;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
}
Since the position of #navbar-bg
is fixed, I want the navigation bar as a whole to be fixed, and the margin-top
of #body
should not affect the navigation bar. Yet the margin-top
moved both the #body
and the navigation bar down, which is strange.
I want to fix this problem using an elegant solution, not adding a <br>
after header
.
html css
add a comment |
I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin
of the title div
somehow affected the positioning of the navigation bar.
I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br>
after the navigation bar, it worked, but I think it is not elegant.
Is there a better method to achieve what I want?
Below is my simplified HTML code:
<header id='navbar-bg'>
<div id='navbar'>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</header>
<div id='body'>
<h1 id='search-title'>This is a title</h1>
</div>
And the CSS style:
#navbar-bg {
position: fixed;
width: 100%;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
}
Since the position of #navbar-bg
is fixed, I want the navigation bar as a whole to be fixed, and the margin-top
of #body
should not affect the navigation bar. Yet the margin-top
moved both the #body
and the navigation bar down, which is strange.
I want to fix this problem using an elegant solution, not adding a <br>
after header
.
html css
I am trying to create a simple web page with a navigation bar and a title centered in the page. However, the margin
of the title div
somehow affected the positioning of the navigation bar.
I think this is caused by the margin collapsing of two adjacent block-level boxes? I have tried to fix this problem by adding a <br>
after the navigation bar, it worked, but I think it is not elegant.
Is there a better method to achieve what I want?
Below is my simplified HTML code:
<header id='navbar-bg'>
<div id='navbar'>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</header>
<div id='body'>
<h1 id='search-title'>This is a title</h1>
</div>
And the CSS style:
#navbar-bg {
position: fixed;
width: 100%;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
}
Since the position of #navbar-bg
is fixed, I want the navigation bar as a whole to be fixed, and the margin-top
of #body
should not affect the navigation bar. Yet the margin-top
moved both the #body
and the navigation bar down, which is strange.
I want to fix this problem using an elegant solution, not adding a <br>
after header
.
html css
html css
asked Dec 30 '18 at 12:36


George YuGeorge Yu
134
134
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You have to set a top: 0px
to the #navbar-bg
element. According to Mozilla:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
So, when you don't use top for the #navbar-bg
element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.
add a comment |
For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:
#navbar-bg {
position: fixed;
width: 20%;
float: left;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
float: right;
width: 80%;
}
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977637%2fflexbox-affected-by-margin-afterwards%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You have to set a top: 0px
to the #navbar-bg
element. According to Mozilla:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
So, when you don't use top for the #navbar-bg
element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.
add a comment |
You have to set a top: 0px
to the #navbar-bg
element. According to Mozilla:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
So, when you don't use top for the #navbar-bg
element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.
add a comment |
You have to set a top: 0px
to the #navbar-bg
element. According to Mozilla:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
So, when you don't use top for the #navbar-bg
element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.
You have to set a top: 0px
to the #navbar-bg
element. According to Mozilla:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
So, when you don't use top for the #navbar-bg
element, it will fall back to it's initial values, which is relative to body. So the body margin is also present in that element.
answered Dec 30 '18 at 12:48


Mohammadreza GhorbaniMohammadreza Ghorbani
14827
14827
add a comment |
add a comment |
For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:
#navbar-bg {
position: fixed;
width: 20%;
float: left;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
float: right;
width: 80%;
}
add a comment |
For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:
#navbar-bg {
position: fixed;
width: 20%;
float: left;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
float: right;
width: 80%;
}
add a comment |
For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:
#navbar-bg {
position: fixed;
width: 20%;
float: left;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
float: right;
width: 80%;
}
For a navbar it's probably best to be on the left of the body, so you could do this in your CSS:
#navbar-bg {
position: fixed;
width: 20%;
float: left;
}
#navbar {
display: flex;
align-items: center;
}
#body {
margin-top: 200px;
float: right;
width: 80%;
}
answered Dec 30 '18 at 12:57
David DeprostDavid Deprost
13217
13217
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977637%2fflexbox-affected-by-margin-afterwards%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Cxoej59w8,j83D