Working on my portfolio and came into a problem with positioning - http://harden6615.com/portfolio/index.html - I have a fixed header nav that I used a jquery scroll on and works fine until it passes down through the work section of my site. The fixed header's depth is below the work images instead of above. Messing around with it, I realized it has something to do with position: relative, but do not know how to work around it.
I tried z-index: -1 to my work images, but this breaks the jquery hover I have on them. Anyone know of a solution to fixed positioning or if there is a solution?
I tried it in Google Chrome with the google developer tools and it works when i add this to #floatingbar:
position:fixed;
width:960px
z-index:10;
Set a higher index to your #floatingbar DIV, rather than lowering the portfolio squares.
#floatingbar {
z-index: 9999 !important;
}
Related
Scrolling is disabled on this webpage, however, when using an iPad in landscape, this problem occurs. There is no gray space at the bottom until you try to scroll down (this is disabled) but all of the sudden the gray space appears. I've tried to find the answer everywhere with no success. The link to the page is www.papiasxm.com
body {
position: relative;
}
seems to be fixing the issue.
For responsive design, using padding/margin sometime causes the issue of overlapping the main design. For this type of problem, it is good practice to not to use fixed height or if you need to use it then fix it with margin/padding.
you can fix body position to relative. here, position: relative;
positioned relative to its normal position.
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
I have a blog that I'm having a slight styling (CSS) issue in Chrome only. For reference the blog is located here.
The issue is that (in Chrome only) when I scroll the content should go under the nav bar (but over the top of the big image), but it goes over. Again, this issue only exists in Chrome.
I'm not sure where to even start, but I'm hoping y'all will have a few tips for me. Thanks!
The issue was actually fairly simple and had to do with the positioning of the header elements.
I changed #header_area .page to position: absolute, and #header_area .Nav to position: fixed. I also gave #header_area .header a top margin of 70px and made that position: fixed as well.
Is it even possible? I made a header for my site position at "fixed". The i also have an image positioned at "relative". Whenever I scroll the site.... I noticed that the image was layered "above" the header. Even the twitter profile widget i placed was above the header. They both overlap the header and i dont want that. Any idea on how to resolve my problem? please HELP!
Btw.... ive heard that "fixed" is buggy esp in Android, where I am making my site.
You'll need to use z-index to set the layering, something like this:
.menu {position:fixed; z-index:99999}
.content {position:relative; z-index:1}
Then you can fine tune it by using numbers in between.