Float, Position, Z-index, Opacity | Web Design FREE Boot-camp with Tarun | Class 10 | Lazy Syntax
By default, every element in the webpage appears on the left side. Generally, you would want that. But what if you want something on the right! We add float property in our stylesheet.
Floating and Positioning are almost the same, but floating makes elements float to the edge of the page. Doesn’t matter what’s the size of the page.
Although positioning is used for a more precise position of an element on the webpage.
1. Relative position
2. Absolute position
3. Fixed position
Now when you get two elements overlapping each other and you want a specific element to come on top, then you can use z-index. The element with more z-index value will be in front and the element with less z-index value will be behind.
To make an element transparent we use the opacity property where the value of opacity is as:
0 = Completely Transparent (but the element is still there)
1 = Default Look
Hi. I am Tarun and I'm teaching my friends about Float, Position, Z-index, and Opacity in this video. I hope you enjoy the learning process and if you do then don't forget to have fun while learning to code with @lazysynatx
Notes:
1. CSS Layout
https://medium.com/learn-web-development-n...
2. Position, Z-index, Opacity
https://medium.com/learn-web-development-n...
In the following video we will cover the following:
~ Margin & Padding
~ Borders
Join FREE Live Classes:
https://t.me/LAZY_SYNTAX
Check out the entire playlist here 👇
• Web Design Bootcamp
Social Media:
Instagram: https://www.instagram.com/lazysyntax/
Facebook: https://www.facebook.com/lazysyntax/
Twitter: https://www.twitter.com/lazysyntax/
Time Stamps 👇
00:00 - Intro
00:08 - CSS Layout
22:38 - Relative Position
27:27 - Absolute Position
31:05 - Fixed Position
34:45 - Z-index
43:42 - Opacity
50:14 - Outro
Tags:
#cssfloat #cssposition #csszindex #cssopacity