Absolute Position it’s a position library, created for positional elements on the screen in an extremely easy way.
for running , you just need to put the cdn script tag into your project.:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
The Full Source Code it’s available in:
Source
these it’s the example of a simple div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<div class="APositionStart">
<div APosition="$16:9(50px,100px,200px,300px)" style="background-color: red;">
Hello World
</div>
</div>
</body>
</html>
Every time you type and APosition inside what ever tag , its became recognizable by the lib after you pass the following arguments:
<div APosition=" $16:9 (50px, 100px,200px, 300px)">
AspectRatio Left, Top ,Width, Height
you can use px,%,vh,vw as the measures (I will add more on the future)
With the Operators + and - you can determine positions dynamically on the screen
As you can See the + operator increments 100px the value left of each div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<div class="APositionStart">
<div APosition="$16:9(00px,100px,100px,100px)" style="background-color: red;"></div>
<div APosition="$16:9(+10px,last,last,last)" style="background-color: blue;"></div>
<div APosition="$16:9(+10px,last,last,last)" style="background-color: red;"></div>
<div APosition="$16:9(+10px,last,last,last)" style="background-color: blue;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<div class="APositionStart">
<div APosition="$16:9(0px,00px,100px,100px)" style="background-color: red;"></div>
<div APosition="$16:9(last,+10px,last,last)" style="background-color: blue;"></div>
<div APosition="$16:9(last,+10px,last,last)" style="background-color: red;"></div>
<div APosition="$16:9(last,+10px,last,last)" style="background-color: blue;"></div>
</div>
</body>
</html>
you also can put divs from button to the top or from right to the left by using the - operators
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<div class="APositionStart">
<div APosition="$16:9(800px,100px,100px,100px)" style="background-color: red;"></div>
<div APosition="$16:9(-10px,last,last,last)" style="background-color: blue;"></div>
<div APosition="$16:9(-10px,last,last,last)" style="background-color: red;"></div>
<div APosition="$16:9(-10px,last,last,last)" style="background-color: blue;"></div>
</div>
</body>
</html>
With the % prop, you can centralize or position an element in every part you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<div class="APositionStart" >
<div APosition="$16:9(200px,200px,200px,200px)" style="background-color: red;">
<div APosition="$16:9(0%,33.3%,100%,33.3%)" style="background-color: blue;">
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<div class="APositionStart">
<div APosition="$16:9(200px,200px,200px,200px)" style="background-color: red;">
<div APosition="$16:9(33.3%,0%,33.3%,100%)" style="background-color: blue;">
</div>
</div>
</div>
</body>
</html>
With the mod operator:% we can determine diferents behaviors based on current iteration of the element, allowing simulate flexbox behavior,for example, if %3 means every time its a multiple of 3(0,3,6,9,12) , it will put that measures instead of default measures.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<div class="APositionStart">
<div APosition="$16:9 %3(10%,+10%,20%,15%) $16:9 (+10%,last,last,last)" style="background-color: red"></div>
<div APosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div>
<div APosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div>
<div APosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div>
<div APosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div>
<div APosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div>
<div APosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div>
</div>
</body>
</html>
With Macros, you can define macros to replace the code into the tag these it’s useful when you want to avoid code repetition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<script>APosition_define_macro("test","+100px,100px,100px,100px")</script>
<div class="APositionStart">
<div APosition="$16:9(00px,100px,100px,100px)" style="background-color: red;"></div>
<div APosition="$16:9(test)" style="background-color: blue;"></div>
<div APosition="$16:9(test)" style="background-color: red;"></div>
<div APosition="$16:9(test)" style="background-color: blue;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<div class="APositionStart" >
<div APosition="$16:9(200px,200px,200px,200px)" style="background-color: red;">
<div APosition="$16:9(33.3%,33.3%,33.3%,33.3%)" style="background-color: #0033ff;">
</div>
</div>
</div>
</body>
</html>
if some error happen on some tag it will be showed on console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<div APosition="$16:9ddpx,100px,200px,300px)" style="background-color: red;">
Hello World
</div>
</body>
</html>
if you want to disable error logs , you just need to set the variable absolute_position_show_errors to false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css">
<script src="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script>
</head>
<body>
<script>
absolute_position_show_errors = false;
</script>
<div class="APositionStart" >
<div APosition="$16:9ddpx,100px,200px,300px)" style="background-color: red;">
Hello World
</div>
</div>
</body>
</html>