I have a div (banner) with fixed position and a div (content) .When I scroll down the div (content), it will overlap with the div (banner) and caused some wording in div (banner) not able to see. I have tried to put z-index on both div but still have same result. Please see my code at Jsfiddle.
Jsfiddle:https://jsfiddle.net/ckcheah/731sLxks/
you can add background-color to your banner.
like this:background-color: #fff;
actually, you can set your banner top:0 to fixed it in the top of the frame.
Related
I know the solution is very simple, but I have come here for help to get the answer quickly I hope. So I have my page set up with Divs and I have a "content" div and with in that content div I have a contentarea div, so here is the problem I have run into: I want to position the "contentarea" div in the content div, the "contentarea" div will be centered in the content div with a little margin on the top and bottom. The problem is when I set the margin "top" for the contentarea div the the "contentarea div" is not actually moving but the content div itself is moving, and creating white space between the menu. Some how the contentarea div when moved, moves the content div. Any solutions? I want the content div to stay where it is when I position my content area div!!
For the main div use:
overflow: auto;
Or overflow visible :). U can also set padding on the main div :).
Best regards!
If you don't want to use overflow, you can do the trick with padding, look at this code :
Exemple :
.contentdiv {
padding-top: 10px;
}
Or
.container {
padding-top: 10px;
}
The full exemple : http://jsfiddle.net/Ca4K2/
i've created a CSS Desk example to help with my question.
I have an outer div, .mainPage and it has a child div, .content. When I set .content's top margin to any size, .mainPage moves with the content.
I don't want that to happen, I want .mainPage div to stay at the top above the header, and the content to start 160px down, which is below the header.
The header is fixed so that only the content moves, to give the really nice effect of the background.
If you change margin-top on the content element to padding-top, the background on .main Page will go below the header. Is that the effect you are going for?
Also, just to note, you don't have a position of relative, absolute or fixed set on .mainPage, so z-index won't work.
I have a question about margin in CSS. I have a DIV element, which has an image for background. Inside that DIV I have another DIV. I want this DIV inside to be 200px from the top. But, when I do that, the outside DIV also moves down for 200px. Why is that and how to keep the outside DIV on top?
Set padding-top on your outside div.
For an detailed explanation to your problem see here.
Ok got this strange issue where i have a absolute positioned div with inside a header. Then there's a nav tag with a margin and for some the absolute positioned div instead of sitting top left of header it positioned where the nav starts. So if the nav has 100px top margin the div starts 100px down.
But the strange thing is if I apply a border to the header the absolute positioned div acts as how i would expect.
I'm using html5 boilerplate styles, this i suppose could be the issue.
It's easier to explain if you view an example. The below links are stripped down version and have identical mark up apart from one where the header has a border and the other it doesn't.
Example with the problem:
http://bennyb.co.uk/test/no-border.html
Example with the issue fixed when the border is applied
http://bennyb.co.uk/test/border.html
Thanks
B
EDIT:
Ok thought this was actually just related to nav but seems it's the same if a div
Apply
overflow: hidden;
to the header.
Can some one explain why I cant get the vertical bar behind my menu? I've tried absolute and relative positioning with z-indexing but no effect. Any ideas?
Live:Test
Remove the body background-image and give to .top class