Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the type of positioning method used for an element with JavaScript?
In this tutorial, we shall learn to set the type of positioning method used for an element with JavaScript.
The positioning permits us to move elements out of actual document order and make them appear in various ways. For instance, stay on top of one another or occupy the initial position within the browser viewport.
Understanding CSS Position Types
Before diving into JavaScript implementation, let's understand the available position values:
- static ? The default position. Elements follow normal document flow.
- relative ? Positioned relative to its normal position without affecting other elements.
- absolute ? Positioned relative to the nearest positioned ancestor or document body.
- fixed ? Positioned relative to the viewport, stays in place when scrolling.
- sticky ? Behaves like relative until reaching a scroll position, then becomes fixed.
Using the Style position Property
With the Style "position" property, we can set or return the type of positioning method used for an element. We must also specify the element's top, right, bottom, or left properties to position it as needed.
Syntax
object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit";
Parameters
- static ? The element follows the document flow.
- absolute ? The element is relative to its first non-static ancestor element.
- fixed ? The element is relative to the browser window.
- relative ? The element is relative to its actual position.
- sticky ? The element appears based on the scroll position.
- initial ? Sets this property to its default value.
- inherit ? Inherits this property from its parent element.
Example 1: Basic Position Change
In this example, we change an element's position from relative to absolute when the button is clicked:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 350px;
height: 200px;
background-color: orange;
border: 3px solid red;
position: relative;
top: 20px;
}
</style>
</head>
<body>
<p>Click to set the type of positioning method using position property.</p>
<button type="button" onclick="display()">Set Position</button>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br><br>
<script>
function display() {
document.getElementById("box").style.position = "absolute";
}
</script>
</body>
</html>
Example 2: Multiple Position Types
Here, we demonstrate setting different position types for various elements:
<html>
<head>
<style>
#parent2{
border:2px solid #9370DB;
color:#A9A9A9;
padding:20px;
}
#element2{
border:1px dotted #BDB76B;
background-color:#C71585;
padding:20px;
color:#DAA520;
}
#parent3{
color:#FFFFFF;
padding:50px;
background-color:#191970;
margin-top:50px;
}
#element3{
background-color:#20B2AA;
padding:20px;
color:#000;
bottom:0;
left:0;
right:0;
}
#posTypMultWrap2,
#posTypMultWrap3,
#posTypMultWrap4{
display:none;
}
#posTypMultBtnWrap{
float:left;
}
</style>
</head>
<body>
<h2>Set the position type of multiple elements using the position property.</h2>
<div id="posTypMultWrap2">
<b>Position type - absolute</b>
<div id="parent2">Parent
<div id="element2"> Child </div>
</div>
<br><br>
</div>
<div id="posTypMultWrap3">
<b> Position type - fixed</b>
<div id="parent3">Parent
<div id="element3">Child</div>
</div>
</div>
<div id="posTypMultBtnWrap">
<p>Click on the buttons to set different position types.</p>
<button onclick="setMultPosType(2);">Absolute</button>
<button onclick="setMultPosType(3);">Fixed</button>
</div>
<script>
function setMultPosType(type){
var posTypMultBtnWrap = document.getElementById("posTypMultBtnWrap");
var posTypMultEl2 = document.getElementById("posTypMultWrap2");
var posTypMultEl3 = document.getElementById("posTypMultWrap3");
var posEl2 = document.getElementById("element2");
var posEl3 = document.getElementById("element3");
var parEl3 = document.getElementById("parent3");
if(type == 2){
posEl2.style.position = "absolute";
posTypMultEl2.style.display = "block";
}
else if(type == 3){
parEl3.style.position = "relative";
posEl3.style.position = "fixed";
posTypMultEl3.style.display = "block";
}
}
</script>
</body>
</html>
Example 3: Relative Positioning with Animation
In this example, we set relative positioning to enable CSS animations:
<html>
<head>
<style>
#parent{
border:2px solid #483D8B;
color:#5F9EA0;
padding:20px;
}
#element{
border:1px dotted #2F4F4F;
background-color:grey;
padding:20px;
color:#000;
margin-top:10px;
-webkit-animation: push ease 5s alternate infinite;
animation: push ease 5s alternate infinite;
-webkit-animation-delay:1.5s;
animation-delay:1.5s;
}
@-webkit-keyframes push{
0% {
left:0;
top:0;
}
50% {
left:-100px;
top:100px;
}
100% {
top:50px;
left:50px;
}
}
@keyframes push{
0% {
left:0;
top:0;
}
50% {
left:-100px;
top:100px;
}
100% {
top:50px;
left:50px;
}
}
#posTypSimpWrap{
display:none;
}
#posTypSimpBtnWrap{
float:left;
}
</style>
</head>
<body>
<h2>Set the position type of an element using the position property.</h2>
<div id="posTypSimpWrap">
<b>Relative position</b>
<div id="parent">Parent
<div id="element">Child</div>
</div>
</div>
<div id="posTypSimpBtnWrap">
<p>Click on the button to set position type.</p>
<button onclick="setPosType();">Set</button>
</div>
<script>
function setPosType(){
var posTypSimpBtnWrap = document.getElementById("posTypSimpBtnWrap");
posTypSimpBtnWrap.style.display = "none";
var posTypSimpEl = document.getElementById("posTypSimpWrap");
var posEl = document.getElementById("element");
posEl.style.position = "relative";
posTypSimpEl.style.display = "block";
}
</script>
</body>
</html>
Browser Compatibility
The position property is widely supported across all modern browsers. However, note that Internet Explorer does not support the sticky positioning method, and Safari requires a -webkit-sticky prefix for sticky positioning.
Conclusion
The JavaScript position property provides a simple way to dynamically change element positioning. Use it with top, right, bottom, or left properties to precisely control element placement in your web applications.
359 Views
