I have a header, mainbody and footer. Header and mainbody are properly styled. Now for footer I want to make it appear behind mainbody, so I used:
z-index: -1;
position: relative;
top: -60px;
This gives the desired result, but I get an extra space of 60px at the bottom.
How do I clear this extra space?
Paul is correct. margin-top: -60px; instead of top: -60px;. Another possible solution would be to set the "mainbody" to position: relative; then to use position: absolute; bottom: 60px; on the footer - although this woild mean the footer needs to be moved inside "mainbody". though as long as the parent of footer flows with "mainbody" you could use this same trick on that element instead.
The “extra” space at the bottom is the space that the footer would be taking up. Relatively positioned elements still take up the same space in the page’s layout flow, even though they’re appearing somewhere else.
You could try a negative bottom margin on your mainbody. You may find this means you don’t need top: -60px; on your footer.
You can still use:
position: relative;
top: -60px;
for the section you need but set
margin-top: -60px;
to section which appears next. In this case - footer.
another solution for this is:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
top creates extra margin and margin-bottom removes it
for some reason for h tag only this worked for me. negative margin-top doesnt work
One way to achieve that would be to put the div inside another, absolute'ly positioned div so that it's taken out of the document flow.
Not really a direct answer to your question, but depending on what you want to display behind the main content, you can perhaps just fake it.
If it´s an image, you can simply put it in html {} or body {} (or a div that encapsulates all content) and align it to the bottom.
The appropriate answer is to make the body have position relative then style what you want to style using position absolute and using top of your choice
Related
I'm using this script from W3Schools.
There was some minor modifications acording to my needs.
I added in .overlay class an overflow-y: auto; because my content is longer and the original example has only a few lines and the scrolling bar is coming handy.
I switched in both .overlay .closebtn classes the position: fixed to position: absolute because like I said the content will be long and the closing button have to be present while scrolling and not fixed only on the top.
The problem is in .overlay-content is specified top: 25% and if I try to add bottom: 25% is not working. If I delete both top and bottom and I use margin-top and magin-bottom is working but is that valid? It's is valid to use margin in conjunction with position:relative?
It will be work
.overlay-content{
z-index: 999;
}
Im trying to accomplish this:
http://codepen.io/Mest/pen/oKBIu?editors=110
.child-div {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
but instead of a "child-div" i want to target an img-class, like this:
http://codepen.io/dantveita/pen/ZGdKmd
.parent-div img {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
When i do this, im getting a horizontal scrollbar, and im not sure why. Could anyone explain this to me. And if possible, provide a solution?
Thanks
Since you are using position: relative, moving the image to the left doesn't actually take it outside of the document flow, so, according to the browser, it still thinks the image is sticking out.
Because there are no containing elements, there's also no need to use viewport-width over a percentage. For some reason, using viewport-width instead of a percentage adds a little extra space on the right, underneath the scrollbar, even when the image is absolutely positioned.
However, this works:
.parent-div img {
position: absolute;
left: 0;
width: 100%;
}
You may also want to remove the width="1400px" from your image tag, as it isn't necessary and may cause inheritance issues later on.
Im going to go with
.parent-div img {
display:block;
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
on the img-class for now, while hiding overflow-x, until something comes up that makes hiding the scrollbar prevent users from viewing content.
The reason for using this method, and not closing the "previous" container (which would be the obvious choice) is that i want a quick solution for a wordpress blogtemplate, where all images given a specific img-class will stretch full width, when media is inserted from post-editor.
Heres an example of the effect im looking for (theverge.com is obviously closing containers):
http://www.theverge.com/2015/8/4/9090897/mlb-bam-live-streaming-internet-tv-nhl-hbo-now-espn
I'm really not sure how to word this question, but here goes... I have a navigation bar at the top of my web page with a position of "fixed" so that it stays at the top even if I scroll down. However, I have a box that will hold all of my text/blogs that overlaps with this navigation bar whenever I scroll down.
Is there a way to "delete" a few pixels of the box (the one that holds all of my stuff) so that the navigation bar never overlaps with it? I'm sorry if this is confusing, but like I said, I'm not sure how to word it.
Screenshots:
When I'm not scrolled down-
When I am (overlapping)-
So I want to get rid of the overlapped area of my content container (and maybe 5px below it).
The other answers are spot on. I'd check the margins, and the overflow setting.
If the div's have absolute, relative, or fixed positioning, you can also play around with the z-index.
The higher the value of the z-index, the higher up in the stack an element is. So an element with a z-index of 2 will be displayed in front of an element with a z-index of 1.
On the box that contains your main content, add a margin-top equal to the height of the navigation bar. For example, if this is your html:
<div id="navbar">...</div>
<div id="content">...</div>
Then your css would be something like this:
#navbar {
position: fixed;
top: 0;
left: 0;
height: 50px;
}
#content {
margin-top: 50px;
}
Ok, thanks for the screen shots.
#navbar_id {
position: absolute;
top: 0;
left: 0;
height: 50px;
z-index: 25;
}
#main_stuff_id {
z-index: 24;
/*other
style
rules*/
}
keep in mind the "css box model" too: http://www.w3schools.com/css/box-model.gif
It sounds like you want to enforce a margin on an element with position: fixed; set. I don't think this will work, but you could put a fixed-position container around the element which you want to actually be fixed. This container can have padding, which will then give the desired effect.
<div style="position:fixed;padding:16px;background-color:#fff;width:100%;box-sizing:border-box">
<!-- don't fix the inner element -->
<div style="background-color:red">The content you want to be fixed.</div>
</div>
Working Fiddle: http://jsfiddle.net/qtHtY/
Or if you are using position you can then use top: #px; and left: #px
I have a "ribbon" type header on the top of my website:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
position: absolute;
top: 0;
left: 0;
margin-bottom: 100px;
padding: 10px 0 0 0;
color: #C0C0A8;
}
The absolute positioning is needed to make sure it occupies the complete width of the user's browser (as far as I know). However, the rest of my webpage (the main body which contains all my other divs) is hidden behind this ribbon:
#pagebody {
width: 60%;
margin-left: auto;
margin-right: auto;
}
The only solution I have been able to find is adding a bunch of <br> between the end of top-wrapper and the start of pagebody.
Is there a better way of doing this?
As per my comment in another answer:
You can just use width: 100%, but make sure you remove the default gap it leaves with:
html, body {
margin: 0;
padding: 0;
}
You should also check out necolas' normalize.css. It includes all of this basic CSS rules you're going to need in pretty much every site :)
Absolutely positioned elements (top-wrapper) are always on top of relative elements (pagebody), unless you do some hacky stuff with z-index (and even that is limited). What you probably want to do is move the pagebody element down just past the top-wrapper. I don't know how tall your top-wrapper is because it has no specified height. And you might not know it due to font-size differences. But overall, you simply need to add a top margin or padding to the pagebody tag, something like this:
margin-top:50px;
Absolute positioning takes an element out of the normal flow. You do not need absolute positioning to maximize width. You do that with width:100%.
There are many ways to do this. First, you can place your top wrapper outside the pagebody element and then just define its width as 100%.
If you have a graphic that is a ribbon and it is supposed to overlap the top of the pagebody element - as I think you are saying above - then you would use position absolute and z-index to place it above the pagebody element. Then add the proper padding-top to pagebody.
You didn't provide html so we don't really know what you're up to totally.
i want my div of menu to appear on the top left of the div for my header image. The backgrounds used for the menu blocks are transparent and translucent and i want that the image of the header should be visible under through translucent and transparent backgrounds.. How can i do it using css??
the class for div of menu is divmenu and for header is divmainimg
div.divmainimg {
position: relative;
}
div.divmenu {
position: absolute;
top: 0;
left: 0;
}
Consider changing the class names to mainimg and menu, respectively.
Set position: relative; on the parent object of your menus that you want them to be positioned relative to, and set position: absolute; on the menu divs. Often you can get away without specifying the exact position - if the divs appear in the DOM where you want them to be visually. E.g. this could be enough:
body {
position: relative;
}
div.menu {
position: absolute;
}
Edit: Forget about z-index for now - it is rarely needed.
HTH
try to use absolute position, and set a high z-index for the div you want over others..
You could also now Just simply put the div you want to be over the other div inside the div you want to be under for example:
pretend your div class="a" is the one you want on top, Then div class="b" you want on bottom.
that would put A on top then B under it.
I believe what you are wanting is z-index. Rather than explaining it here, just do a Google search for it. It is simple to understand.