Overlapping Layout With CSS Flex Box

[@webcifar]

🔔subscribe and turn on the notification bell.
👉 source code: codepen.io/Web_Cifar/pen/dyXNVep
👉 Facebook group : bit.ly/fb-group-webcifar

[@mdshiponahammed1074]

Ow

[@dylansalvador6782]

instablaster...

[@JaneDoe-sw4wz]

THIS TUTORIAL WAS EXACTLY WHAT WAS IN MY MIND AND I WOULDNT DONE IT WITHOUT YOU TYSMM!!

[@saucedbenny]

I’ll save everyone 18 minutes: negative margin

[@siddharth.ingale]

Thanks for making the tutorial video about Overlapped Layout.
I kinda needed it. 😍

[@webcifar]

Glad to hear that! ✌🐱‍🏍

[@mervyndeanhilary2831]

Today we are going to create a overlapping layout wit CSS FlexBox. This is a popular layout that you might 'saw' on many website.... please edit your description to 'might see'

[@webcifar]

Thank You

[@hassenhamrouni2147]

Awesome , MAN . I love your creativity and your way of building web components . I'd love if you do a video on a responsive megamenu using html pure css and js with a search box, even a simple one . much respect !

[@webcifar]

Noted

[@jess.777]

This is exactly what I was looking for!! 🤩

[@yusufhassan3055]

Bro ur helping me add to my skillset may god bless you. U even got me through a couple of projects

[@colindante5164]

Thanks and you did an amazing job explaining this to us folks. )))

[@samuelqz2471]

What a video bro! Can't thank you enough! Thank you so much you made life so much easier!

[@lavglidesgh6266]

Thanks for the simplicity
I did have to add display:flex to the left class before the right came to the center

[@tonytony-fc6gq]

thanks very much i spent hours trying to do this layout , never thought of using negative margins

[@ivanalvarado3646]

Mate I had no idea negative margins were even possible until today. I'm learning and him using a negative margin changed everything.

[@geraldnoah9927]

This is beautiful! ty you man! followed ya on twitter already!

[@lifeisbeautiful4491]

Hello,
Just wanna say that your videos are really helping me a lot. Just keep on doing the thing. Hope to get more videos on coming days.

[@mateusloubach]

wow! great video. you make it look so easy. I'll be on the lookout for z-index and container videos.

[@captaineliasplayz8824]

Amazing tutorial clear, fast and amazing!

[@eichan3180]

Thank you very much. Your guided is really support to improve in this way. Really thank you.

[@kawsarwp]

Nice one

[@webcifar]

Thanks 🔥

[@sully9832]

9:46 is when he actually shows you how to over lay (it just a negative margin), you're welcome.

[@ashrafulrahmansakil9612]

it's a very helpfull video .thanks , you remove my tension.

[@mervyndeanhilary2831]

you are a good teacher...

[@sylvanusjoseph1140]

Thank You. Great Tutorial.

[@soniadarshsuresh8240]

how to solve the problem of overlapping of image slider on navigation bar. Because When I created my Image slider it is not compatible with my Navigation bar as the Image is Overlapping on the Navigation bar and creating problem for the Navigation bar.

[@astha2827]

thank you SO much you saved my life

[@alitopedits]

Thanks 👍👍👍

[@webcifar]

Welcome 👍

[@neeshsamsi]

Love the content keep it up 😁

[@webcifar]

Thanks! Will do!

[@aagamvora699]

Thank you .. Keep making these kind of short videos ..😍❤

[@webcifar]

Sure 😊

[@joshuajaydan]

Using your code from the codepen, the contents of the h1 are in a single row. I think you need to add 'flex-direction: column;' to get them to stack.

[@tbinyt]

overlapping @9:55

[@SAL73VFX]

Excellent tutorial, it did help me a lot, thanks!

[@webcifar]

Glad it helped!

[@servantofthesupremeallah2895]

Tnx a lot u solved a problem of mine

[@andre3000-e3v]

how can i put it at the bottom instead at the side?

[@sindyospina8214]

Thank you, very useful! :)

[@rexism886]

thanks man i really appreiacte

[@_iLoveCoding]

Thanks man this is very helpful, I tried to follow every step but on the mobile screen, I'm not getting the empty margin top and bottom! any help please

[@snapattack13]

Thx a lot very useful video

[@webcifar]

Welcome ✌

[@mervyndeanhilary2831]

if i want to make my images or the container section have some padding at the top, how do i?...

[@davidbugatti2159]

Hi Cifar, excellent video.
But I have one question, do you use rem and em instead of pixel for responsive design?
I see that you use px in this video, thanks..

[@webcifar]

Yes, correct. I use usually use rem for the font and for the spacing i use em. But in this video it's just a web component, so i just used px.

[@neeshsamsi]

Hey what exactly is the use of min and max width/height ? What is the difference between simply using width and height ?

[@webcifar]

www.w3schools.com/cssref/pr_dim_min-width.asp
www.w3schools.com/cssref/pr_dim_max-width.asp
Hope this will help🐱‍🏍

[@neeshsamsi]

@@webcifar Thank you !

[@millermcdonell291]

Thanks a lot, helped me so much. ☺☺

[@webcifar]

Glad it helped!

[@majgajsek7818]

Cifar this was a great vide :D

[@ipsitsaha]

Can you make it with 3 divs ? Like in center we can have conten.. then left and right .. bottom and upper corner two pics..

[@Khaenman1]

Thanks for sharing!

[@webcifar]

Our pleasure!

[@TenoriGaby]

Excelent video it helped me a lot!

[@webcifar]

Glad to hear it!

[@十一-d8x]

Thx!this turtorial! could you teach Overlapping Layout one page use flexbox turtorial? thx you~

[@trishaseal7782]

Thanks a lot!

[@mariselaespinoza4112]

You did a great job explaining everything! Thank you =]

[@webcifar]

Glad it was helpful!

[@harshbundela9403]

Thank you so much sir

[@joannatillery]

Thank you SOOOOO much!

[@Miguel-vk4dn]

Thank u so much!!!

[@touseefibnkhaleel3643]

beautiful

[@webcifar]

Thanks

[@harshneerajan4011]

I did this and I added some sections after this overlap section - but then the below added sections are hidden under the div(which contains the overlap elements).

[@esraamohamed5601]

Thank you

[@webcifar]

You're welcome

[@nagpalnirmal]

Thanks Sir

[@felix_codes]

Good tutorial!

[@sawalikorde2722]

perfectly explained.

[@HariharakumarBandaru]

nice video bro

[@webcifar]

Thanks for the visit

[@stf8375]

Great tutorial !

[@webcifar]

Thank you!

[@emiralic3355]

Great video, thank you! But i got one problem, my image in css does not work, just did what you did and just dont get it. i have tried many ways to solve this.

[@grupos.g.3458]

Same! Have you found a solution?

[@coolaverage2017]

it wont let me overlap once I make the right div -150. chrome tools gives me a warning

[@coolaverage2017]

forgot the px unit lol

[@waelhashassi8511]

how to use this in react ?

[@anhxel]

9:45

[@debrad.castleberry2457]

Amazing

[@webcifar]

Thank you! Cheers!

[@mohammadmahdialvansaz8001]

thanks

[@webcifar]

Welcome

[@sawalikorde2722]

awesomeeee

[@mariakausar2477]

💯👍

[@Omar-um8oq]

thanks god i found this video

[@manishabhumi2357]

❤️

[@venugopalsaini]

is there any Indian here?

[@TheOnkard]

9:55

[@priyankagupta8361]

thank you