Let's start learning together
In this blog, we will be learn and understand position in CSS. This will help you to explore the more about the CSS positions. So, let's start with the CSS (cascading style sheets )in detail.
Cascading style sheets (CSS) is defined as a style sheet language developed in the 1990s to support the styling of web documents, which is now an essential skill for web developers and one of the key pillars of the internet user experience that works in conjunction with various markup languages. This article explains position property of CSS that you need to know.CSS is the cascading style sheets .which is used to style a HTML documents .CSS describes how HTML elements should be displayed.
what are the position in CSS
The position property specifies the type of positioning method used for an element.
There are five different position values:
static
relative
fixed
absolute
sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Static(Default)
he elements are positioned according to the normal flow of the document.
Syntax and Example:
selector {
position: static;
}
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
Relative
Elements are positioned relative to the normal position in the document.
You can use the top, right, bottom, and left properties to move the element from its original position.
Syntax:
selector {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
Absolute
The absolute positioning is used to position an element relative to the first parent element that has a position other than static. If no such element is found, the containing block is HTML.
With the absolute positioning, you can place an element anywhere on a page.
Example:
<head>
<style>
#about{
position: relative;
}
.logo{
position: absolute;
right: 10px;
top: 10px;
}
</style>
</head>
<body>
<h1>Position in CSS</h1>
<div class="about">
<p>Developer</p>
<P>CSS (cascading style sheets)</p>
</div>
</body>
</html>
Fixed
Elements are positioned relative to the viewport (screen) and do not move when the page is scrolled.
This is useful for creating elements like fixed headers or footers.
Example:
<head>
<style>
h1{
position: fixed;
top: 10px;
right: 20px;
}
</style>
</head>
<body>
<h1>positons in CSS</h1>
</body>
</html>
Float
The float property is used to shift an element to the left or right within its containing element. For more details, follow CSS Float.
Sticky
Position sticky is a hybrid between 'relative' and 'fixed'.
It allows an element to become "stuck" to the top or bottom of its container when scrolling, but it behaves like relative positioning within the container until it reaches a specified offset.
Example:
<head>
<style>
h1{
position: sticky;
top: 10px;
right: 20px;
}
</style>
</head>
<body>
<h1>positions in CSS</h1>
</body>
</html>
The CSS position property is used to set position for an element. it is also used to place an element behind another and also useful for scripted animation effect. You can position an element using the top, bottom, left and right properties. These properties can be used only after position property is set first. so, its about the CSS selector.
if you enjoy and learn from this blog .please do like and subscribe.