Structure Hierarchy

Understanding the behavior of elements in Webflow is crucial. Here we will discuss the hierarchy of elements in three aspects:

• Placement — how objects are placed inside each other (e.g. ancestors, descendants, peers)
• Transferred text styling — how text styling is passed on from ancestor to descendant
• Dimension relations — how the dimensions of ancestor elements and descendant elements influence each other

Placement

Placement involves positioning one object within another. For instance, if a Title is positioned within a div, that Title has now been placed inside the div. Learn about the box model.

Observe placement in the Navigator

The placement can be most clearly observed in the Navigator panel.

Once positioned inside the div, the title becomes a child element of the div. Other elements that are added are children of the div element as well. They are also peers of one another.

 The hierarchy initiates from the body–the top-tier element of all websites. Directly beneath that, all its descendant elements are slightly indented. The horizontal indentation denotes that the elements are descendants. To elements at this level, their ancestor element is the Body.

The Divs within the Body element act as ancestor elements to the content nestled within. That content is further indented, signaling that these elements are descendants of the Divs.

Observe placement in the breadcrumb bar

The second location where hierarchy can be viewed is below the Canvas in the Breadcrumb Bar. Choosing any element allows quick identification of its relationship to its ancestors. However, it will not display peer elements, only its immediate ancestor, and that ancestor’s immediate ancestor, and so forth.

Transferred text styling

When an element has font styles, these styles are passed down to its descendant and subsequent descendant elements. For instance, if you modify the font type on the Body element, all its descendant elements will inherit the same font. Descendants can replace styles inherited from ancestors and previous ancestors. For instance, if you choose a div and modify the font type, all its descendants will inherit the same font. However, if you then select a descendant element and change the font type, it will replace the font inherited from the parent div. Discover more about text style inheritance.

The Style Panel provides a straightforward way to identify which styles are being inherited and from where they are being inherited. Orange labels and icons indicate that a style is being inherited from an ancestor element or a higher class or tag.

Dimension relations

Most elements are sized according to the content within them. For instance, divs by default have no set height. However, including elements within a div will increase the div‘s height.

While descendants impact the size of their ancestor elements, assigning a fixed height or width to an ancestor element will override this. This implies that the content will not influence the height of the ancestor container anymore. Consequently, when there is additional content in that container, the content will extend beyond the container. Explore how you can conceal the overflow and attach scrollbars to fixed-height containers.