Help Moving a Border above a tab with relative positioning

[Idea]

Hello there!

So, there was this one effect I wanted to (re)create wherein one clicks a "button" and this triggers the "buttons" themselves to change. Now to my understanding the way this is done is by putting the "buttons" over the tabs, the covering being different from tab to tab.

Now the issue I'm having is that when I try to move the border that has the "buttons" above the tab they are contained in, they disappear into the border of the tab. I've tried looking at code where I've seen the kind of effect I want to accomplish done successfully but even after a number of tries I can't figure out exactly what I may be missing.


Long story short: I want to move content inside a border that is in turn inside a tab, above the tab itself to cover the tab's buttons.


If anyone could help achieve this, I would be grateful.

 

[Novelight]

• Content 1
• Click me

• .
• I AM THE STORM THAT IS APPROACHING

[border=1px solid red; margin: 15px auto; box-sizing: border-box; width: clamp(250px, 100%, 500px); position: relative][Tabs][Tab=Content 1].[/tab][Tab=Click me][border=1px solid blue; position: absolute; top: 0px; right: 50px; background: green]I AM THE STORM THAT IS APPROACHING[/border][/tab][/tabs]

Let me know if you need more help.

 

[Idea]

• Content 1
• Click me

• .
• I AM THE STORM THAT IS APPROACHING

[border=1px solid red; margin: 15px auto; box-sizing: border-box; width: clamp(250px, 100%, 500px); position: relative][Tabs][Tab=Content 1].[/tab][Tab=Click me][border=1px solid blue; position: absolute; top: 0px; right: 50px; background: green]I AM THE STORM THAT IS APPROACHING[/border][/tab][/tabs]

Let me know if you need more help.

Thank you! So the key is to use position:absolute rathe lê than position:relative? Or does the clamp thing have something to do with it?

 

[Uxie]

Thank you! So the key is to use position:absolute rathe lê than position:relative? Or does the clamp thing have something to do with it?

i explain it a little here in my mini tabs tutorial: click me!

but long story short-- you'll need both position:absolute and position:relative, but on different borders. clamp isn't necessary for its most basic form, but from what i can see in the snippet serobliss posted, it was to help keep it mobile-friendly. hope that helps! (´･ᴗ･ ` )

 

[Idea]

i explain it a little here in my mini tabs tutorial: click me!

but long story short-- you'll need both position:absolute and position:relative, but on different borders. clamp isn't necessary for its most basic form, but from what i can see in the snippet serobliss posted, it was to help keep it mobile-friendly. hope that helps! (´･ᴗ･ ` )

Thanks for the explanation. This is more an aside than anything, but how does clamp help with mobile-friendly formatting? I don't really know what the clamp is (lots of things I don't know, but hey ya learn this stuff step by step, right?)

 

[Uxie]

Thanks for the explanation. This is more an aside than anything, but how does clamp help with mobile-friendly formatting? I don't really know what the clamp is (lots of things I don't know, but hey ya learn this stuff step by step, right?)

you can read about clamp here! for this code in particular clamp(250px, 100%, 500px) means the tabs container will try to take 100% width but not more than 500px and no less than 250px. on mobile, this 100% is significantly smaller than on desktop, so the tabs container will shrink accordingly!

 

[Idea]

you can read about clamp here! for this code in particular clamp(250px, 100%, 500px) means the tabs container will try to take 100% width but not more than 500px and no less than 250px. on mobile, this 100% is significantly smaller than on desktop, so the tabs container will shrink accordingly!

Thank you very much! I'll very much have to give that a try in future codes I make.