How to use grid area to create grid layout
grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of…
To change the position of a div there are multiple ways. You can change the position of the div by changing the top, left, right, and bottom properties of a div position if it is set to position fixed or absolute
div{
position:fixed;
top:100px;
left:100px
}
There are the following types of positions in CSS. the default position is static in the CSS.
It depends on your requirement that which type of position you want to use to position an element in CSS.
position absolute and relative works relative to the nearest non static patrent. For example , if you button wrapped with two div , then it works relative to the nearest non static parent (which postion is set other than non static).
By default, each element has a static position. The static position has no effect on the top, left, right and bottom properties.
div{
position: static;
}
The fixed position is used to fix an element in HTML. If you want to fix an element in HTML structure you can use fixed position. Position fixed works relative to the viewport, the element with position fixed always stays at its position even if the page is scrolled. For example – The WhatsApp button is fixed on the right bottom of the websites.
top, left, right, and bottom properties are used to position an element with a position fixed.
div{
position:fixed;
top:0;
left:0;
}
Static | default position position: static; |
absolute | To position an element in an element on the specific position position: absolute |
relative | To position an element relative to itself position: relative |
fixed | To fix the element relative to the viewport position: fixed |
sticky | position toggled between fixed and relative position: sticky |
Position absolute is used to position an element relative to an element in CSS.
Example: You want to fix a button in a div at a specific position.
<div class="post">
<p>how to fix div in css</p>
<button>read more</button>
<div>
.post{postion:relative}
.post button{
position:absolute;
left:0;
bottom:0
}
position:sticky
is used to stick the element in a specified position from an element when scrolling. For example – a sticky header on a webpage
A sticky element’s position is toggled between fixed
and relative
. The element is positioned as relative until the specified offset is met in the viewport or parent element. If offset is met the element is positioned as fixed
header{
position:sticky;
top:0;
}
If you are using position absolute make sure its parent position is nonstatic (other than position: static) otherwise your desired result can’t be made.
Ashish Yadav is a passionate Software Engineer and technology enthusiast having 3 years of experience in web development with a deep interest in the ever-evolving world of technology.
With a background in computer science and extensive experience in software development, Ashish brings a unique perspective to his writing in the tech blogosphere & love to learn and work on technologies
grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of…
Hello guys in this article we are going to see how to create moving background animation in CSS for the website. So here we are going to use @keyframe animation and translate…
System design is the process of defining systems and architectures to satisfy specific requirements. It includes the process of building architecture, components, or interfaces to satisfy the specific requirement which translates requirements…
Hello coders, in the blog we will learn how to reload a page in the React JS application Unlike the traditional web development practices where a simple page refresh could suffice, ReactJS,…
in this article, we will learn how to add an image in HTML. the syntax of adding an image in HTML is the same whether it reacts or another technology. <img/> is…