Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
glenn romaniuk
32,520 PointsHelp sidebar transition overlaying my collapse button
this project has a main page with a button in the upper right corner when click a sidebar is to transition in from the left 300px wide underneath the sidebar is an underlay set to transparent it will occupy 100% of the width it will prevent future controls from being edited while the sidebar is visible the button is to toggle the sidebar in/out but the underlay position is absolute and no matter what i set my buttons z-index to its still not clickable when the sidebar is out
basically i want the button clickable no matter what the state of the sidebar
See example here
4 Answers
Chris Dziewa
17,781 PointsYou could just remove this: $("#underlay").toggleClass("slideoutunderlay"); The way it is set up right now would not be very user friendly. If you do need to keep your transparency underlay, I would recommend attaching the click button to the sidebar (edge of the sidebar like a tab perhaps) itself. This way you would still be able to keep everything else from being clicked on while the sidebar is open but you could still close it and the placement of the button would make more sense.
Jason Anello
Courses Plus Student 94,610 Pointsz-index has no effect on elements with static positioning.
You need to set a positioning context for your button so the z-index will work. Either relative, absolute, or fixed. Relative works here.
#btnEx {
position: relative;
z-index: 10;
}
Chris Dziewa
17,781 PointsNice solution Jason! In this case, he wouldn't even need to include the z-index and it would still work.
Jason Anello
Courses Plus Student 94,610 PointsI looked at it more closely based on Chris's comment and realized that you were trying to set the z-index on your #topdiv
I glossed over topdiv the first time around and didn't realize it's the container for the button. So that's fine you can do it there but again, you still need to set a positioning context.
#topdiv {
position: relative;
z-index:5;
}
However, this puts the div on top of the sidebar and it seems to block your link and button in the sidebar. Is that what you wanted?
If those should still be working then I recommend that you either use my original answer and assign the z-index to the button and not topdiv.
Or give topdiv a z-index of 2 and the sidebar a z index of 3. That puts topdiv on top of the underlay and the sidebar on top of topdiv.
Jason Anello
Courses Plus Student 94,610 PointsChris Dziewa Thanks!
the underlay has a z-index of 1 so wouldn't the button or it's container need to have a higher z-index in order to be above the underlay?
I might have missed what you meant in your comment.
Chris Dziewa
17,781 PointsJason Anello I think the z-index property isn't needed because the button is an element with an id attribute that is inside another element with an id attribute. This could just be giving more specificity in the browser. This is only an educated guess though. Just setting the positioning property did everything that was needed when I tried it.
glenn romaniuk
32,520 PointsI hear you on the screen layout and design but the product owner wants the button in the upper right corner so it will be fixed in that location. In the next phase they want to add physics like animation to have it transition in out on a gesture type swipe. I'll try the positioning and z-index. I've learned something thx
glenn romaniuk
32,520 Pointsi;ve got one more question related to this my html is broken down into partial files the side bar html is a partial that gets inserted into the main page the jquery code runs when i click on a side bar command my css class that the jquery event handler adds to the target div does not do anything because the page or dom does not refresh the css. Any way to force the page to refresh its css with css3, jquery, or javascript?
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsGlenn,
Even if my answer fixes the problem you should still take Chris' answer under consideration. The button that's opening and closing the sidebar probably should be close to what it is interacting with.
Presumably you're opening the sidebar to do something with it. So you have to move all the way to the top right to open it and then move back to the left to interact with it.
If you do make it part of the sidebar then you should be fine with your underlay having a z-index of 1 and the sidebar having a z-index of 2.