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.:
<linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><divclass="APositionStart"><divAPosition="$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:
<divAPosition=" $16:9 (50px, 100px,200px, 300px)">
AspectRatio Left, Top ,Width, Heightyou 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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><divclass="APositionStart"><divAPosition="$16:9(00px,100px,100px,100px)" style="background-color: red;"></div><divAPosition="$16:9(+10px,last,last,last)" style="background-color: blue;"></div><divAPosition="$16:9(+10px,last,last,last)" style="background-color: red;"></div><divAPosition="$16:9(+10px,last,last,last)" style="background-color: blue;"></div></div></body></html><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><divclass="APositionStart"><divAPosition="$16:9(0px,00px,100px,100px)" style="background-color: red;"></div><divAPosition="$16:9(last,+10px,last,last)" style="background-color: blue;"></div><divAPosition="$16:9(last,+10px,last,last)" style="background-color: red;"></div><divAPosition="$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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><divclass="APositionStart"><divAPosition="$16:9(800px,100px,100px,100px)" style="background-color: red;"></div><divAPosition="$16:9(-10px,last,last,last)" style="background-color: blue;"></div><divAPosition="$16:9(-10px,last,last,last)" style="background-color: red;"></div><divAPosition="$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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><divclass="APositionStart" ><divAPosition="$16:9(200px,200px,200px,200px)" style="background-color: red;"><divAPosition="$16:9(0%,33.3%,100%,33.3%)" style="background-color: blue;"></div></div></div></body></html><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><divclass="APositionStart"><divAPosition="$16:9(200px,200px,200px,200px)" style="background-color: red;"><divAPosition="$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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><divclass="APositionStart"><divAPosition="$16:9 %3(10%,+10%,20%,15%) $16:9 (+10%,last,last,last)" style="background-color: red"></div><divAPosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div><divAPosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div><divAPosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div><divAPosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div><divAPosition="$16:9 %3(10%,+10%,last,last) $16:9 (+10%,last,last,last)" style="background-color: red"></div><divAPosition="$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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="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><divclass="APositionStart"><divAPosition="$16:9(00px,100px,100px,100px)" style="background-color: red;"></div><divAPosition="$16:9(test)" style="background-color: blue;"></div><divAPosition="$16:9(test)" style="background-color: red;"></div><divAPosition="$16:9(test)" style="background-color: blue;"></div></div></body></html><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><divclass="APositionStart" ><divAPosition="$16:9(200px,200px,200px,200px)" style="background-color: red;"><divAPosition="$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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><divAPosition="$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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/style/AbsolutePosition_v0.2.css"><scriptsrc="https://cdn.jsdelivr.net/gh/OUIsolutions/AbsolutePosition@main/versions/AbsolutePosition_v0.75.js"></script></head><body><script>absolute_position_show_errors=false;</script><divclass="APositionStart" ><divAPosition="$16:9ddpx,100px,200px,300px)" style="background-color: red;">
Hello World
</div></div></body></html>