Skip to main content

Variable: Overlay

const Overlay: "Overlay"

Defined in: react/src/generated/jsx.ts:14083

Places “overlay” widgets on top of a single main child.

The position of each overlay widget is determined by its [property@Gtk.Widget:halign] and [property@Gtk.Widget:valign] properties. E.g. a widget with both alignments set to %GTK_ALIGN_START will be placed at the top left corner of the GtkOverlay container, whereas an overlay with halign set to %GTK_ALIGN_CENTER and valign set to %GTK_ALIGN_END will be placed a the bottom edge of the GtkOverlay, horizontally centered. The position can be adjusted by setting the margin properties of the child to non-zero values.

More complicated placement of overlays is possible by connecting to the [signal@Gtk.Overlay::get-child-position] signal.

An overlay’s minimum and natural sizes are those of its main child. The sizes of overlay children are not considered when measuring these preferred sizes.

GtkOverlay as GtkBuildable

The GtkOverlay implementation of the GtkBuildable interface supports placing a child as an overlay by specifying “overlay” as the “type” attribute of a <child> element.

CSS nodes

GtkOverlay has a single CSS node with the name “overlay”. Overlay children whose alignments cause them to be positioned at an edge get the style classes “.left”, “.right”, “.top”, and/or “.bottom” according to their position.