How to use CSS Position Property. This article is signified to learn CSS code for positioning the elements and how to control them from overlapping. CSS Position specifies how a special element should be positioned on a webpage. The central point of this section is to explain how to control the position part and appearance of the content. Exploring Positioning with CSS old version is quite difficult therefore a new standard CSS compliant Layout has more current versions. Developing to the positioning and layout model it is quite a complex part as they have to cope with the browser implementation results. This Positioning property has five different methods specifically static, relative, absolute, sticky, fixed which is explained briefly in the following section.
Read Also: What is CSS?
Methods of Position property.
- Position: Relative;
- Position: Fixed;
- Position: Absolute;
- Position: Static;
- Z-Index:999;
How to use CSS Position Property
Position Relative:
It is essential while creating a CSS layout and it finds quite complex. An HTML element with this property works the same as static and they are altered by setting the right, and left values to the parent element.
<h2>Position: Relative;</h2>
<p class="relative">This is a relative normal position.</p>
<style>
.relative {
position: relative;
left: 30px;padding: 5px;
border: 3px solid #ddd;
}</style>Position Fixed
Fixed positions are specifically comparable to absolute positioning, but they are disrupted from the normal flow of the text and made fixed in an exact point on the web page, and all other elements of HTML function as it doesn’t exist on the page. The key dispute between absolute positioning and fixed positioning is that a fixed position will hold its range on the continuing page when there occurred to have some page Scroll.
<h2>Position: Fixed;</h2>
<p class="fixed">This is a Fixed Paragraph this position is fixed if the page is scrolled:</p>
<style>
.fixed {
position: fixed;
bottom: 0; padding: 10px;
right: 0; width: 300px;
border: 3px solid #ddd;
}</style>Position Absolute:
In this position, an element is set with reverence to themselves and it is excluded from the normal flow of the document. Overall, they are overwhelmed in the top-left of its predecessor or parent element.
<h2>Position: Absolute;</h2>
<div class="relative">This is Relative Property.
<p class="abosulte">This is Abosulte Property:</p></div>
<style>
.relative {
position: relative;
padding: 10px;
width: 300px;
height: 160px;
border: 3px solid #ddd;
}
.abosulte{
position: absolute;
top: 60px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>Z- index
CSS Positioning. There happens a situation where the elements in the web page get overlaid in the normal flow, to discover the precise positioning of those elements on the top or bottom Z- index is utilized. In nonprofessional terms, it sets the stacking order of an element or can be termed a three-dimension viewport. A positive margin defines an element that should be pushed to the top and a negative margin implies to the bottom. And Z-index doesn’t perform well with static positioning systems.
<h2>Jenny</h2>
<img src="https://i.imgur.com/T99pFeM.png"></div>
<style>
img{width: 50px;height: 50px;}
h2 {
position: absolute;
left: 0px;
top: 15px;
z-index: 1;
}
</style>Position static:
Static Position elements are set by default and they have no influence on the properties like right, left, bottom, top. They don’t have any unusual direction it was created positioned with reverence to the normal Page.
<h2>Position Relative</h2>
<style>
h2 {
position: static;
border: 3px solid #73AD21;
}
</style>