Constant freya::elements::paragraph::layer

source ·
pub const layer: (&'static str, Option<&'static str>, bool);
Expand description

Controls the stacking order of elements on the z-axis.

In Freya, elements are stacked in the order they appear in the DOM, with later elements appearing on top of earlier ones. The layer attribute allows you to explicitly control this stacking behavior.

Lower layer values position elements higher in the stack (visually on top), while higher values position elements lower in the stack (visually behind).

A value of 0 maintains the default stacking order, effectively keeping the layer the same.

§Example

fn app() -> Element {
    rsx!(
        rect {
            width: "500",
            height: "500",
            // Using an image as the base element
            image {
                width: "300",
                height: "200",
                image_data: static_bytes(include_bytes!("../_docs/rust_logo.png")),
            }
            // Overlay on top of the image using absolute positioning
            rect {
                position: "absolute",
                position_top: "0",
                position_left: "0",
                width: "300",
                height: "200",
                background: "rgba(0, 0, 255, 0.5)", // Semi-transparent blue overlay
                layer: "-1", // Ensures this is on top
            }
        }
    )
}