u-position-(y)-(x)
ブロック要素を親要素の指定した位置に絶対配置する。
親要素に position:relative を指定している必要がある。
u-position-top-left
u-position-top-center
u-position-top-right
u-position-center-left
u-position-center-center
u-position-center-right
u-position-bottom-left
u-position-bottom-center
u-position-bottom-right
<div>u-position-top-left</div> <div style="position: relative; background-color: #ffe28e; margin-bottom: 5px; width: 100px; height: 100px;"><span class="u-position-top-left" style="background-color: #333; width: 10px; height: 10px;"></span></div> <div>u-position-top-center</div> <div style="position: relative; background-color: #ffe28e; margin-bottom: 5px; width: 100px; height: 100px;"><span class="u-position-top-center" style="background-color: #333; width: 10px; height: 10px;"></span></div> <div>u-position-top-right</div> <div style="position: relative; background-color: #ffe28e; margin-bottom: 5px; width: 100px; height: 100px;"><span class="u-position-top-right" style="background-color: #333; width: 10px; height: 10px;"></span></div> <div>u-position-center-left</div> <div style="position: relative; background-color: #ffe28e; margin-bottom: 5px; width: 100px; height: 100px;"><span class="u-position-center-left" style="background-color: #333; width: 10px; height: 10px;"></span></div> <div>u-position-center-center</div> <div style="position: relative; background-color: #ffe28e; margin-bottom: 5px; width: 100px; height: 100px;"><span class="u-position-center-center" style="background-color: #333; width: 10px; height: 10px;"></span></div> <div>u-position-center-right</div> <div style="position: relative; background-color: #ffe28e; margin-bottom: 5px; width: 100px; height: 100px;"><span class="u-position-center-right" style="background-color: #333; width: 10px; height: 10px;"></span></div> <div>u-position-bottom-left</div> <div style="position: relative; background-color: #ffe28e; margin-bottom: 5px; width: 100px; height: 100px;"><span class="u-position-bottom-left" style="background-color: #333; width: 10px; height: 10px;"></span></div> <div>u-position-bottom-center</div> <div style="position: relative; background-color: #ffe28e; margin-bottom: 5px; width: 100px; height: 100px;"><span class="u-position-bottom-center" style="background-color: #333; width: 10px; height: 10px;"></span></div> <div>u-position-bottom-right</div> <div style="position: relative; background-color: #ffe28e; margin-bottom: 5px; width: 100px; height: 100px;"><span class="u-position-bottom-right" style="background-color: #333; width: 10px; height: 10px;"></span></div>