I have a question, I have a div that keeps moving with my scroll,and it drives me crazy because i can't fix this bug, tried a few things but they didn't work out..
Here's the link to a GIF with it:
https://i.gyazo.com/24186375915a9ede01700ac879badbc7.mp4
You Set Fixed Position on Your Div..Try to change that Css Property and then Proceed Further..
Related
I am trying to get sticky positioning to work with scroll snap but I am having difficulties.
I looked at the example on CSS Tricks (in codepen link) on how to use scroll snap and found it breaks if you don't have
overflow-y: scroll;
on the container (commented out on line 3). But if you do, then it breaks my two column sticky scrolling. Does anyone have any ideas on how I can use both?
https://codepen.io/shellwe/pen/abzgNzQ
If not anyone have some good suggestions on how to achieve the scroll snap in JS? I found this that may work but I would love to have the CSS handle it for me.
http://jsfiddle.net/kZY9R/79/
For anyone who comes by this, the reason you need the overflow-y: scroll is because you also need a set height and it scrolls within that constraint. I finally got back to this project and took a while to figure out why it won't work.
Cheers!
How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...
http://www.triniscene.com/tsv7/caribbean/galleries/
Can anyone point out what is causing the page curl effect to NOT be visible. I'm wrecking my brain here and I'm just not figuring it out
Well I think I figured it out which was pretty weird imo. Originally I thought the issue lied within my css markup but after noticing how it worked in Fiddle and not on the website I did some more digging. turns out when you made the :after z-index:-1 the stacking order went behind the parent divs which I just realized was position:relative. giving the parent div a z-index fixed it.
Weird
It's quite early and so I'm probably missing something apparent here but I'd like to ask the community for some quick help. When you visit the demo page and hover over the slider, you'll see that the next and previous buttons appear as they should. Though the images have a "fold" effect on the left & right side and I'm trying to figure out why they're not showing.
I've toyed around with the z-index but can't figure it out. May someone please help with what should be a quick fix?
Thanks!
You have set overflow : hidden on your
<div class="pix_diapo diapostarted">
Since your folds are outside of the containing element, it hides it.
Just remove it, and it will work.
I've done this in the past using a method similar to this:
http://javascriptkit.com/javatutors/static3.shtml
but I don't like the "flicker" effect as the page is scrolled and the div needs to move with the scrolling. Lately I've seen a lot of site that have an element (a div or the like I presume) that don't move when the page is scrolled but it's seemless...they're just there and it's a beautiful thing.
Unfortunately I can't seem to recall where I've seen it lately to view the source and try to figure it out so I figured I'd turn here and see what all of you experts can provide as far as assistance / suggestions.
TIA
Try setting "position: fixed" to the element.
I think this does not work with some IE versions, you'll have to us JS for that.
That site you linked to still mentions thing such as IE 4 on it, better no rely on it. It's outdated.
You can position an element to a fixed position with CSS, by doing position: fixed;.
Take a look at google reader.
It has a fixed header and a fixed side bar.