{"id":6265,"date":"2024-04-14T19:15:24","date_gmt":"2024-04-14T11:15:24","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6265"},"modified":"2024-04-14T19:15:24","modified_gmt":"2024-04-14T11:15:24","slug":"structure-hierarchy","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/structure-hierarchy\/","title":{"rendered":"Structure Hierarchy"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Understanding the behavior of elements in Webflow is crucial. Here we will discuss the hierarchy of elements in three aspects:<\/p>\n<ul>\n<li><strong>Placement<\/strong> \u2014 how objects are placed inside each other (e.g. ancestors, descendants, peers)<\/li>\n<li><strong>Transferred text styling<\/strong> \u2014 how text styling is passed on from ancestor to descendant<\/li>\n<li><strong>Dimension relations<\/strong> \u2014 how the dimensions of ancestor elements and descendant elements influence each other<\/li>\n<\/ul>\n<h2>Placement<\/h2>\n<p>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.<\/p>\n<h3>Observe placement in the Navigator<\/h3>\n<p>The placement can be most clearly observed in the Navigator panel.<\/p>\n<p>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.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/220055556\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/220055556\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>\u00a0The hierarchy\u00a0initiates from the body\u2013the 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.<\/p>\n<p>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.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/220060283\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/220060283\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h3>Observe placement in the breadcrumb bar<\/h3>\n<p>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\u2019s immediate ancestor, and so forth.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/220062586\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/220062586\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2>Transferred text styling<\/h2>\n<p>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.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/220063731\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/220063731\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<p>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.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/220064413\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/220064413\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<h2>Dimension relations<\/h2>\n<p>Most elements are sized according to the content within them. For instance, <strong>divs<\/strong> by default have no set height. However, including elements within a <strong>div<\/strong> will increase the <strong>div<\/strong>&#8216;s height.<\/p>\n<p>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.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/220065643\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/220065643\" frameborder scrolling=\"no\"><\/iframe><\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn 3 ways hierarchy is used in Webflow projects.","protected":false},"author":2,"featured_media":6266,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[287],"tags":[],"class_list":{"0":"post-6265","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-getting-started","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6265"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6265\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6266"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}