Constant layer

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

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.

There are two modes:

• overlay: Always on top
• Numeric: A lower value positions the element higher in the stack (visually on top), while higher values position elements lower in the stack (visually behind), 0 makes the element maintain its default behavior. Like with distance, 0 is right on front of you and 1000km away you can’t even see it.

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", // Positions the element in the same layer as its parent, effectively on top of `image`
            }
        }
    )
}