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 right position of a positioned element with JavaScript?
In this tutorial, we shall learn to set the right position of a positioned element with JavaScript.
What is a positioned element? The available position values in CSS are relative, absolute, fixed, or static. The static position is the default position value. Static elements are in the document order.
A positioned element's position is based on its properties like the top, right, bottom, and left.
We must set the position in every direction to align the elements as required. Here we are going to see the right position property.
Using the right Property
With this property, we can set or return the position right of a positioned element. The right property includes margin, padding, border, and scrollbar also.
The position right does not work on the element that has a static position. The position right is the distance from the right edge of the containing block. Positive values move the element toward the left.
Syntax
object.style.right = "auto|length|%|initial|inherit";
This syntax allows us to set the required position right to the element's style.
Parameters
- auto ? The browser sets the position right.
- length ? Sets the position right in length units. Negative values are accepted.
- % ? Sets the position right in % of the parent element's width.
- initial ? Sets this property to its default value.
- inherit ? Inherits this property from its parent element.
The default value of this property is auto. The return value is a string representing the position right of a positioned element.
Example 1: Basic Right Position
You can try to run the following code to set the right position of a positioned element with JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 350px;
height: 200px;
background-color: orange;
border: 3px solid red;
position: absolute;
}
</style>
</head>
<body>
<p>Click to set the right position.</p>
<button type="button" onclick="display()">Set Right Position</button>
<div id="box">
<p>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.</p>
<p>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.right = "70px";
}
</script>
</body>
</html>
Example 2: Multiple Elements
In this program, we set the position right of multiple div elements having an absolute position.
When the user presses the button, we call the function to set the position right with the syntax given above.
<html>
<head>
<style>
.rtPosMultEl{
position: absolute;
width: 20px;
height: 20px;
}
#rtPosMultEl1{
background-color: grey;
top: 20px;
}
#rtPosMultEl2{
background-color: black;
top: 80px;
}
#rtPosMultEl3{
background-color: pink;
top: 50px;
}
#rtPosMultWrap{
position: relative;
}
#rtPosMultBtnWrap{
margin-top: 80px;
float: left;
}
</style>
</head>
<body>
<h2>Setting the right position of the positioned elements using the "right" property.</h2>
<div id="rtPosMultWrap">
<div class="rtPosMultEl" id="rtPosMultEl1"> </div>
<div class="rtPosMultEl" id="rtPosMultEl2"> </div>
<div class="rtPosMultEl" id="rtPosMultEl3"> </div>
</div>
<br>
<div id="rtPosMultBtnWrap">
<p> Click on the button to set different position right values.
</p>
<button onclick="setRight();"> Move </button>
</div>
<br>
</body>
<script>
function setRight(){
var rtPosMultBtnWrap =
document.getElementById("rtPosMultBtnWrap");
var rtPosMultEl1 = document.getElementById("rtPosMultEl1");
var rtPosMultEl2 = document.getElementById("rtPosMultEl2");
var rtPosMultEl3 = document.getElementById("rtPosMultEl3");
rtPosMultEl1.style.right = "20px";
rtPosMultEl2.style.right = "40px";
rtPosMultEl3.style.right = "60px";
}
</script>
</html>
Example 3: User-Selected Values
In this program, we are setting the position right to a single absolute div element. We get the position right from the user.
When the user presses the button, we call the function to set the position right with the syntax given above.
<html>
<head>
<style>
#rtPosUsrEl{
background-color: #B0E0E6;
text-align: center;
width: 200px;
position: absolute;
}
</style>
</head>
<body>
<div id="rtPosUsrEl"> Move Me.</div>
<br>
<br>
<div id="rtPosUsrBtnWrap">
<select id="rtPosUsrSel">
<option selected="selected"/>auto
<option/> 100px
<option/> initial
<option/> inherit
<option/> 3%
<option/> -5px
</select>
<br>
<p>Choose the position right and click on the button.</p>
<button onclick="setRightUser();"> Set </button>
</div>
<br>
</body>
<script>
function setRightUser(){
var rtPosUsrSelTag = document.getElementById("rtPosUsrSel");
var rtPosUsrSelIndx = rtPosUsrSelTag.selectedIndex;
var rtPosUsrSelStat =
rtPosUsrSelTag.options[rtPosUsrSelIndx].text;
var rtPosUsrBtnWrap = document.getElementById("rtPosUsrBtnWrap");
var rtPosUsrEl = document.getElementById("rtPosUsrEl");
rtPosUsrEl.style.right = rtPosUsrSelStat;
rtPosUsrEl.innerHTML = "<b>" + rtPosUsrEl.style.right + "</b>";
}
</script>
</html>
Key Points
- The
rightproperty only works on positioned elements (not static) - Positive values move the element toward the left from the right edge
- Negative values move the element toward the right
- The property accepts length units (px, em), percentages, or keywords (auto, initial, inherit)
Conclusion
The right property in JavaScript provides an easy way to position elements from the right edge of their containing block. It's essential for creating dynamic layouts and interactive element positioning.
3K+ Views
