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
}
}
)
}