---json
{
    "description": "How to position an element",
    "page_id": "3xys1fd9t77ecptazv5h5"
}
---
====== ComboStrap Styling - Position ======


===== About =====



===== Syntax =====

==== Inside a block====
Inside a [[docs:block:block|block component]], you can position your component using the ''position'' attribute.
<code dw>
<block>
   <component position="value"></component>
</block>
</code>

**Demo**


<webcode name="Default" frameborder="0">
<code dw>
<box width="400px" height="200px" border-color="black" spacing="m-5" class="position-relative overflow-visible">
    <icon position="top-left" name="logo.svg" />
    <badge position="top-quartile-1">top-25</badge>
    <icon position="top-center" name="logo.svg"/>
    <icon position="top-quartile-3" name="logo.svg" />
    <icon position="top-right" name="logo.svg" />
    <text position="left-quartile-1">left-75</text>
    <icon position="left-center" name="logo.svg" />
    <icon position="center" name="logo.svg" />
    <icon position="right-center" name="logo.svg" />
    <icon position="bottom-left" name="logo.svg" />
    <icon position="bottom-center" name="logo.svg" />
    <icon position="bottom-right" name="logo.svg" />
</box>
</code>
</webcode>