Installation
CSS Selectors
Event Handling
DOM Manipulation
Utilities
Data Structures
AJAX APIs
Animation APIs
Widgets Creation
.pos( [ New_Position ] ) - Relative positioning
Gets the relative position of an element with repect to it's immediate parent.
Sets a element to a particular position repective to it's parent if the new position is specified.
Parameters
NameTypeDefaultPossibleDescription
New_PositionJSONOptional{ x : AA, y : BB }, New position in JSON. x refers to horizontal position, y refers to veritcal position
where AA, BB are pixel numbers or String which precedes by "+" or "-"

Ex 1 : { x : 50 , y : 50 }
Ex 2 : { x : "+100", y : "-50" } - current x + 100, current y - 50
Ex 3 : { x : 100 } or { x : "-200" } - Only Horiziontal positioning
Ex 4 : { y : 50 } or { y : "+100" } - Only Vertical positioning
Returns
TypeDescription
JSON{ x : AA, y : BB}, where AA and BB are position of elements in pixel relative to their immediate parents
Example 1
Find the relative position of div box. click on the box divs.
JS HTML CSS 
		$.domLoaded(function() {
			
			$.get(".box").on("click", function() {
				// Get the clicked box div
				var box = $.self();
				
				// Get the position
				var po = box.pos();
				
				// alert x and y fields
				alert(" x : " + po.x + " , y : " + po.y);
			});
			
		});						
						
<body>

	<div class="box">Box 1</div>
	<div class="box">Box 2</div>
	
	<br/>
	
	<div id="cont"> 
		<div class="box">Box 3</div>
	</div>

</body>
	div {
		display : inline-block;
		padding : 10px;
		margin : 5px;
	}
	
	.box {
		width : 100px;
		height : 100px;
		border : 2px solid red;
	}
	
	#cont {
		width : 200px;
		height : 200px;
		border : 2px solid #000;
	}
Result
Example 2
Set fixed relative position of box div.
JS HTML CSS 
		$.domLoaded(function() {
			
			$.get("#btn1").on("click", function() {
				$.get("#box").pos({ x : 0, y : 0});
			});
			
			$.get("#btn2").on("click", function() {
				$.get("#box").pos({ x : 100, y : 100});
			});			
			
		});						
						
<body>

	<div id="cont"> 
		<div id="box">Box 2</div>
	</div>
	
	<br/>
	
	<input type="button" id="btn1" value="Set at 0,0" />
	<input type="button" id="btn2" value="Set at 100, 100" />

</body>
		div {
		display : inline-block;
		padding : 10px;
		margin : 5px;
	}
	
	#box {
		width : 100px;
		height : 100px;
		border : 2px solid red;
	}
	
	#cont {
		width : 200px;
		height : 200px;
		border : 2px solid #000;
	}
Result
Example 3
Set fixed relative position of box div.
JS HTML CSS 
		$.domLoaded(function() {
			
			$.get("#btn1").on("click", function() {
				$.get("#box").pos({ x : "+50"});
			});
			
		});						
						
<body>

	<div id="box">Box 1</div>
	
	<br/>
	
	<input type="button" id="btn1" value="Increase Horizontal position by 50" />

</body>
	div {
		display : inline-block;
		padding : 10px;
		margin : 5px;
	}
	
	#box {
		width : 50px;
		height : 50px;
		border : 2px solid red;
	}
Result