position (_base.scscs)

Tipo: Mixin

Versión: 2.x.x

Define la propiedad position y aplica offsets usando dos estrategias: sintaxis por ejes (y/x) o sintaxis explícita por lados (top/right/bottom/left) con alias cortos (t/r/b/l). Además, permite definir z-index con z.

La sintaxis y/x es útil para ajustes rápidos: y controla el eje vertical y x el horizontal; yaxis y xaxis indican qué propiedad CSS usa cada eje. Cuando el map incluye top, right, bottom o left, esos valores reemplazan la salida basada en ejes. La clave z se traduce directamente en z-index si recibe un valor distinto de false.

Interface 

@mixin position($position: relative, $y: 0, $x: 0, $yaxis: top, $xaxis: left, $z_value: 1);

Sintaxis alternativa (map) 

@include position((
    position: relative,
    y: 0,
    x: 0,
    yaxis: top,
    xaxis: left,
    z: 1,
    top: null,
    right: null,
    bottom: null,
    left: null
));

Uso recomendado del map: define position o p y luego elige una sola estrategia. Si incluyes top/right/bottom/left o t/r/b/l, se usa sintaxis explícita; si no, se aplica la sintaxis por ejes y/x. La clave z no afecta esa decisión y solo controla z-index.

Valores por defecto: position/p relative, y 0, x 0, yaxis top, xaxis left, z 1 y top/right/bottom/left null.

Parámetros secuenciales

Parámetro Tipo Default Descripción
position String relative Define la propiedad position.
y Medida 0 Define el offset del eje Y cuando no se usa un lado explícito.
x Medida 0 Define el offset del eje X cuando no se usa un lado explícito.
yaxis String top Selecciona la propiedad CSS usada para el eje Y.
xaxis String left Selecciona la propiedad CSS usada para el eje X.
z Number | Bool 1 Define la propiedad z-index cuando recibe un valor distinto de false.

Sintaxis map

Clave Tipo Default Descripción
position | p String relative Define la propiedad position.
y Medida 0 Define el offset del eje Y cuando no se usa un lado explícito.
x Medida 0 Define el offset del eje X cuando no se usa un lado explícito.
yaxis | ya String top Selecciona la propiedad CSS usada para el eje Y.
xaxis | xa String left Selecciona la propiedad CSS usada para el eje X.
z Number | Bool 1 Define la propiedad z-index cuando recibe un valor distinto de false.
top | t Medida | Null null Asigna top de forma explícita.
right | r Medida | Null null Asigna right de forma explícita.
bottom | b Medida | Null null Asigna bottom de forma explícita.
left | l Medida | Null null Asigna left de forma explícita.

Precedencia: si el map incluye top, right, bottom o left (o sus alias), esos lados reemplazan la salida basada en y/x. Si se define position y p al mismo tiempo, prevalece position. Si se define una clave larga y su alias al mismo tiempo, prevalece la clave larga.

Ejemplo 


            


            

                

            


            

                
<div class="position_container">
    <div class="position_example box"></div>
</div>
<div class="position_container_explicit">
    <div class="position_example_explicit box"></div>
</div>