Position problem with z-index

1

hi guys, this is a page from my project website. In it, I want to show different content on the page by clicking sidebar item (programme enrolled, payment etc)
this is my page link when only content for programme are coded in the website.
(right now only courseItem code is there and paymentItem code is commented)


I want that in the same page when I click say payment output regarding it must come up
so for this my plan is that I would add position:relative to .loggedIn__Content (line
number:600) class
position: absolute; to the .loggedIn__item class (line number: 645)
and for each item (like .courseItem, .paymentItem etc.) i’d add higher z-index and white background color
then i’d add click event to each sidebar button and add a class with higher z-index with each item(like courseItem etc).
but as I’m doing position:absolute to my .loggedIn__item and it is overflowing footer. this is my code with paymentItem code and position absolute done to my code.

I know there is too much text above so basically I want to show content by clicking some button(sidebar buttons) and attaching higher z-index class to it. Please help me solve this position:absolute and position:relative problem. And tell if there is some problem in my plan.
how can I solve it?

2

Hey, your coding ideas are fine for a beginner. But honestly, the question needs a lot more effort if you want anyone to take the time to help you out.

So I’d recommend you this first:

  • Make it more clear,

  • add proper paragraphs, and use capital letters for a new sentence

  • Surround your code (classes for example) with backticks around `like so `. It will be displayed like so .

  • Ideally, you should simplify your html and css a lot so it’s easier to read and debug. You don’t need to modify your site, just make a new codepen with the relevant snippets.

The last step is optional but recommended (by me at least, there are probably different opinions).

If I understand properly, you want to click an item on the sidebar, and show some new content on the last-section cards?

3

hi i’m sorry for such a messy code i have tried my level hard to arrange it neatly. Actually , I use scss and this code is its compile css and i never look at how dirty it gets , i just keep on working with my scss. But for your help i’ll give line numbers here :
1. .logged__Content whose position: relative is given is at line 311
2. .logged__item whose position:absolute is given is at line 380 this is causing issues
3. .courseItem this page I want at the bottom its code is at line 384
4. .paymentItem this page I want above .courseItem page when clicked at sidebar button payment button its code is at line 388
I hope now you can understand my problematic code and help me solve it.

4

You can paste scss in codepen. Click the gear icon in css tab.

5

yeah i got it now, hey but can you try my code and help me with it

6

Forget about the second page for now. If you look at the first page you sent, you want someone to click where and to show what?

I’ve seen you’re copying the same html twice (the times/pictures section). Is this essential? Otherwise, remove it from the file (just for now).

7

look initially i want my first link
https://codepen.io/anikettiwari/pen/zYrXONv?editors=1100 to show up then if someone click payment button in the sidebar my payment page must take on the previously visible content but instead this second part is getting above footer
https://codepen.io/anikettiwari/pen/gOPyYzj?editors=1010

8

Yes, I see. Would it be enough to display:none the buttons and include new buttons ? Because you’re just changing SUBSCRIBED button by Payment button, right?

Or you could also display none the old section, and display visible to the new one. So no need for absolute positioning.

9

Is this closer to your idea? https://codepen.io/misterybodon/pen/oNbObMX

10

hey but content is not changing if i’m clicking on payment button. i wanted the payment cards there and similarly when i’ll click on edit profile some form must come (form is not ready yet)

11

You said payment button in the sidebar, isn’t that ‘payment details’? (you have to press over the words/text by now)

12

partially it is what i want only the thing is i want that when i click programme enrolled button i should get back that page/part, i think instead of toggling display:none; by button it’d be better I on individual click callback function I add display: none to every other part and make that part display:block and I continue this with all the buttons. I think that would suffice my thing. What do you think?

13

secondly can you tell me why when I was giving position:absolute my courseItem was overflowing footer and yours is not. Like where I was going wrong?

14

What about the sidebar linking to a new html page instead of tweaking much with javascript? The html will be a mess if you keep adding stuff there, imho.

Well I just removed absolute-positioning, that’s all I can say…

15

ohh you actually did display:none so no need of position.
For Js thing I think it’ll work giving it that AJAX/JSON effect of calling something from database without reloading the page.
Because that is the exact effect I want but since I don’t know AJAX/JSON I had to resort to these tricks.
what do you think this will work?

16

In that case, you can add ids to each item in the nav, and to each correspondent section, which is what I did just with one section. Then when clicked you toggle all off (display none) and the clicked element to block.

17

also right now parts aren’t changing by clicking in other buttons

18

yes that’s what i think i 'd do

19

Very clever. Good luck.

20

look this is what i was wanting .

1 Like