Negative margin and absolute positioning on child object - parent height greater than content
up vote
0
down vote
favorite
I have a header container with no fixed height which contains (in the following order)
- A logo of fixed height (200px)
- A position:absolute navbar of 60px which is a on-scroll sticky navbar (gets changed to position fixed after scrolling past it's position). This navbar has a negative margin of -60px in order to put it over the logo (it has transparency)
While everything works correctly, the navbar sits nicely above the logo and has opacity, I noticed that the parent div (with no fixed size) gets it's height set to 260px. This leaves 60px of blank space under the logo.
This is obviously logo (200px) + navbar (60px). Although it's not really 260px, because the navbar is pushed over the logo, therefore the container is practically still only 200px.
I could just simply set the parent container to a fixed height of 200px, but I somehow dislike this because if I ever wanted to tweak the logo height, I'd also need to tweak this.
I could also make a margin-bottom: -60px to accomodate for the navbar, but I don't really think that's good because it still leaves the parent container with height of 260px, and when you play around with the inspector you can see that it's actually overlapping the div under it, it's just not visible.
Is there any way to prevent the parent container from including the height of the navbar, without any JS tricks?
html css
asked Nov 12 at 16:20
hazelnutek
95
add a comment |
up vote
0
down vote
favorite
I have a header container with no fixed height which contains (in the following order)
- A logo of fixed height (200px)
- A position:absolute navbar of 60px which is a on-scroll sticky navbar (gets changed to position fixed after scrolling past it's position). This navbar has a negative margin of -60px in order to put it over the logo (it has transparency)
While everything works correctly, the navbar sits nicely above the logo and has opacity, I noticed that the parent div (with no fixed size) gets it's height set to 260px. This leaves 60px of blank space under the logo.
This is obviously logo (200px) + navbar (60px). Although it's not really 260px, because the navbar is pushed over the logo, therefore the container is practically still only 200px.
I could just simply set the parent container to a fixed height of 200px, but I somehow dislike this because if I ever wanted to tweak the logo height, I'd also need to tweak this.
I could also make a margin-bottom: -60px to accomodate for the navbar, but I don't really think that's good because it still leaves the parent container with height of 260px, and when you play around with the inspector you can see that it's actually overlapping the div under it, it's just not visible.
Is there any way to prevent the parent container from including the height of the navbar, without any JS tricks?
html css
asked Nov 12 at 16:20
hazelnutek
95
Hm. Absolute or fixed position elements do not add to the parent element's height. Can you share the code?
– Sarah C
Nov 12 at 19:36
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a header container with no fixed height which contains (in the following order)
- A logo of fixed height (200px)
- A position:absolute navbar of 60px which is a on-scroll sticky navbar (gets changed to position fixed after scrolling past it's position). This navbar has a negative margin of -60px in order to put it over the logo (it has transparency)
While everything works correctly, the navbar sits nicely above the logo and has opacity, I noticed that the parent div (with no fixed size) gets it's height set to 260px. This leaves 60px of blank space under the logo.
This is obviously logo (200px) + navbar (60px). Although it's not really 260px, because the navbar is pushed over the logo, therefore the container is practically still only 200px.
I could just simply set the parent container to a fixed height of 200px, but I somehow dislike this because if I ever wanted to tweak the logo height, I'd also need to tweak this.
I could also make a margin-bottom: -60px to accomodate for the navbar, but I don't really think that's good because it still leaves the parent container with height of 260px, and when you play around with the inspector you can see that it's actually overlapping the div under it, it's just not visible.
Is there any way to prevent the parent container from including the height of the navbar, without any JS tricks?
html css
asked Nov 12 at 16:20
hazelnutek
95
I have a header container with no fixed height which contains (in the following order)
- A logo of fixed height (200px)
- A position:absolute navbar of 60px which is a on-scroll sticky navbar (gets changed to position fixed after scrolling past it's position). This navbar has a negative margin of -60px in order to put it over the logo (it has transparency)
While everything works correctly, the navbar sits nicely above the logo and has opacity, I noticed that the parent div (with no fixed size) gets it's height set to 260px. This leaves 60px of blank space under the logo.
This is obviously logo (200px) + navbar (60px). Although it's not really 260px, because the navbar is pushed over the logo, therefore the container is practically still only 200px.
I could just simply set the parent container to a fixed height of 200px, but I somehow dislike this because if I ever wanted to tweak the logo height, I'd also need to tweak this.
I could also make a margin-bottom: -60px to accomodate for the navbar, but I don't really think that's good because it still leaves the parent container with height of 260px, and when you play around with the inspector you can see that it's actually overlapping the div under it, it's just not visible.
Is there any way to prevent the parent container from including the height of the navbar, without any JS tricks?
html css
html css
asked Nov 12 at 16:20
hazelnutek
95
asked Nov 12 at 16:20
hazelnutek
95
asked Nov 12 at 16:20
hazelnutek
95
asked Nov 12 at 16:20
hazelnutek
95
asked Nov 12 at 16:20
hazelnutek
95
95
Hm. Absolute or fixed position elements do not add to the parent element's height. Can you share the code?
– Sarah C
Nov 12 at 19:36
add a comment |
Hm. Absolute or fixed position elements do not add to the parent element's height. Can you share the code?
– Sarah C
Nov 12 at 19:36
Hm. Absolute or fixed position elements do not add to the parent element's height. Can you share the code?
– Sarah C
Nov 12 at 19:36
Hm. Absolute or fixed position elements do not add to the parent element's height. Can you share the code?
– Sarah C
Nov 12 at 19:36
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53266181%2fnegative-margin-and-absolute-positioning-on-child-object-parent-height-greater%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
Hm. Absolute or fixed position elements do not add to the parent element's height. Can you share the code?
– Sarah C
Nov 12 at 19:36