Learn 3 ways hierarchy is used in Webflow projects.
It’s important to understand how elements behave in Webflow. Here we’ll cover element hierarchy in three ways:
- Nesting — how objects nest inside one another (e.g. parents, children, siblings)
- Inherited text styling — how text styling is passed down from parent to child
- Size relationships — how the size of parent elements and child elements affect one another
Nesting is placing one object inside another. For example, if a Heading is placed within a section, that Heading has now been nested inside the section. Read about the box model.
View nesting in the Navigator
Nesting is most easily seen in the Navigator panel.
Once nested inside the section, the heading is a child element of the section. Other elements that are added are children of the Section element, too. They are also siblings of one another.
The hierarchy starts with the body–the top level element of all websites. Directly under that, all its child elements are slightly indented. The horizontal indentation indicates that the elements are children. To elements on this level, their parent element is the Body.
The Sections inside the Body element are parent elements to the content nested inside. That content is indented even more which indicates that these elements are children of the Section.
View nesting in the breadcrumb bar
The second place where we can see hierarchy is underneath the Canvas in the Breadcrumb Bar. You can select any element to quickly determine its relationship to its parent elements. However, it will not show sibling elements, only its direct parent, and that element’s direct parent, and so on.
Inherited text styling
When an element has typography styles, these styles are passed down to its child and grandchild elements. For example, if you edit the font family on the Body element, all of its children elements will inherit the same font family. Children can override styles inherited from parents and grandparents. For example, if you select a section and edit the font family, all of its children will inherit the same font family. However, if you then select a child element and edit the font family, it will override the font family inherited from the parent section. Learn more about text style inheritance.
The Style Panel provides a simple way to determine which styles are being inherited, and from where they are being inherited. Orange labels and icons indicate that a style is being inherited from a parent element or a higher class or tag.
Most elements are sized by the content within them. For instance, sections by default have no defined height. However, adding elements inside a section will make the section taller.
While children affect the size of their parent elements, giving a parent element a set height or width will override this. Meaning, the content will not affect the height of the parent wrapper (section, container, div..) anymore. And, when there's more content in that wrapper, the content will overflow the wrapper. Learn how you can hide the overflow and add scrollbars to fixed-height wrappers.