1626199800
CSS Tutorial - Position
In this video, you will learn the CSS Layout - The Position Property
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute, and sticky).
DON’T CLICK THIS https://bit.ly/2Oajh4C
Check my Personal Website https://kaizhelam.github.io/website.com/
Get my Personal Java Tutorial Book online with Free https://cutt.ly/3c31V87
Java Tutorial from scratch to advanced
https://youtube.com/playlist?list=PLj45wIw9J1OTAb2Bv75c9OV3k4BHYfc4O
HTML 5 Tutorial from scratch to advanced
https://youtube.com/playlist?list=PLj45wIw9J1OQN_FlJDp67u5ca5lEtZVQf
CSS 3 Tutorial from scratch to advanced
https://youtube.com/playlist?list=PLj45wIw9J1OSGkUkrI4ZOxNljxoxrh-K4
Data structure and Algorithm in C++
https://youtube.com/playlist?list=PLj45wIw9J1OSQxUVjfEMXZg8A8W9XL1Yz
Please like and subscribe to my channel and press the bell icon to get new video updates.
Thanks for everything!
#css
What is GEEK
Buddha Community
1623809439
Position Layout property in CSS
Hello, World! In this article, we will try to grasp the concepts of one of the trickiest and crucial topics in CSS.
Position layout property in CSS is solely used to place and position elements respectively in an HTML document. They assign respective positions to HTML elements so that the overall design of our page is maintained and managed well.
The widely used positions property in CSS are as follows:
1. Static position:
When an HTML element gets assigned with
staticposition, the various position properties likeleft,right,topandbottomdoesn’t work. Elements in an HTML document carry static position by default.
Let’s copy and paste the code below in an IDE to view what’s happening.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#Section {
height: 200vh;
width: 800px;
border: 5px solid blue;
background-color: cyan;
font-family: monospace;
font-size: 2rem;
text-align: center;
}
#Div1, #Div2, #Div3 {
border: 4px solid red;
font-size: 1.5rem;
width: 200px;
height: 100px;
text-align: center;
display: inline-block;
}
#Div2 {
position: static;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<section id="Section">
<p>This is Section</p>
<div id="Div1">
<p>This is Div 1</p>
</div>
<div id="Div2">
<p>This is Div 2</p>
</div>
<div id="Div3">
<p>This is Div 3</p>
</div>
<section>
</body>
</html>
Upon adding position property
staticto the selector idDiv2, we saw that the position ofDiv2box didn’t change. Hence, we can conclude that elements with positionstaticdoesn’t get affected byleft, right,toporbottomproperties.
2. Relative position:
When an element gets assigned with position
relative, the position properties likeleft,right,top andbottomaffects the element’s position in the page relative to its normal position asstatic.
Let’s copy and paste the code below to
Div2selector to replace the previous position property.
#Div2 {
position: relative;
left: 20px;
top: 50px;
}
We can see that the
Div2box changed its position relative to its normal orstaticposition, i.e.20pxfrom theleftand50pxfrom thetop. Upon applyingrelativeposition property to an element, other contents in the same box won’t get affected and change positions
3. Fixed position:
This position property is used to freeze an element in a particular location of the page so that scrolling doesn’t affect the visibility or location of the element. When we apply
fixedvalue to a selector, it gets removed from the flow of the HTML document, i.e. the selector element gets uprooted from its actual position, becomes relative to the entire viewport, and doesn’t get scrolled.
Let’s copy and paste the code below to know the difference.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#Section {
height: 400vh;
width: 800px;
border: 5px solid blue;
background-color: cyan;
font-family: monospace;
font-size: 2rem;
text-align: center;
}
#Div1, #Div2, #Div3 {
border: 4px solid red;
font-size: 1.5rem;
width: 200px;
height: 100px;
text-align: center;
display: inline-block;
}
#Div2 {
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<section id="Section">
<p>This is Section</p>
<div id="Div1">
<p>This is Div 1</p>
</div>
<div id="Div2">
<p>This is Div 2</p>
</div>
<div id="Div3">
<p>This is Div 3</p>
</div>
<section>
</body>
</html>
After scrolling, we can see that the id
Div2gets fixed in the topmost corner of the document.
4. Absolute position:
Just like
fixedposition, theabsoluteposition property removes selectors from the flow. As the element gets removed from its normal position, the parent element doesn’t regard it as its child anymore. The element becomes relative to the document.
#css #css3 #css-position-property #tutorials #learning-css #html-css
1626922800
Theme Switcher with CSS Variables - Tutorial
Hello! For my last video of 2020, we are learning how to handle themes with CSS Variables, with a cool theme switcher from twitter. Enjoy!
Useful Links:
GitHub: https://github.com/redhwannacef/youtube/tree/master/theme-switcher
#css variables #css #tutorial #css variables - tutorial #css theme switcher
1619706360
CSS Flexbox Tutorial in 30 Minutes | CSS Tutorial for Beginners
#css #tutorial #flexbox #css tutorial
1618024175
CSS Alignment Made Simple
CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.
Therefore, the purpose of this article is to make some features of CSS much easier to understand.
The thing I want to address now is the alignment of the elements.
Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.
#css-center #css-position #css-flexbox #css-center-image-in-a-div #css
1596530868
Hire CSS Developer
Want to develop a website or re-design using CSS Development?
We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.
For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS
#hire css developer #css development company #css development services #css development #css developer #css