--- title: "Overlay Arrangement Style | Explore SwiftUI" description: "An arrangement view style that layers the primary view over the secondary view in z-order" canonical_url: "https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style" meta: author: "Explore SwiftUI" "og:description": "An arrangement view style that layers the primary view over the secondary view in z-order" "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Overlay%2BArrangement%2BStyle%2Cdescription_An%2Barrangement%2Bview%2Bstyle%2Bthat%2Blayers%2Bthe%2Bprimary%2Bview%2Bover%2Bthe%2Bsecondary%2Bview%2Bin%2Bz-order.%2Ccategory_ArrangementView%2Cimage_~L2FwaS9pbWFnZXMvMjUwL3ZhcmlhbnRzLzE3Nzc~dj0xNzkwNTg0NzMzNDEwJnI9MiZ3PTY0MCZoPTQ4MCZmPXBuZw%2CimageMode_fit%2CimagePosition_center%2CimageFrame_~Ym9yZGVyLXJhZGl1czogMzNweCAwcHggMHB4IDMzcHg7IGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci1yaWdodDogMDsgYm94LXNoYWRvdzogMCAtMTBweCA1MHB4IHJnYmEoMzcsOTksMjM1LDAuMTgpOw%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIl19%2Cp_Ii9saWJyYXJ5L2FycmFuZ2VtZW50dmlldy9vdmVybGF5LWFycmFuZ2VtZW50LXN0eWxlIg%2Cs_MPQVVPmiGrBzUdIN.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Overlay Arrangement Style | Explore SwiftUI" "twitter:description": "An arrangement view style that layers the primary view over the secondary view in z-order" "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Overlay%2BArrangement%2BStyle%2Cdescription_An%2Barrangement%2Bview%2Bstyle%2Bthat%2Blayers%2Bthe%2Bprimary%2Bview%2Bover%2Bthe%2Bsecondary%2Bview%2Bin%2Bz-order.%2Ccategory_ArrangementView%2Cimage_~L2FwaS9pbWFnZXMvMjUwL3ZhcmlhbnRzLzE3Nzc~dj0xNzkwNTg0NzMzNDEwJnI9MiZ3PTY0MCZoPTQ4MCZmPXBuZw%2CimageMode_fit%2CimagePosition_center%2CimageFrame_~Ym9yZGVyLXJhZGl1czogMzNweCAwcHggMHB4IDMzcHg7IGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci1yaWdodDogMDsgYm94LXNoYWRvdzogMCAtMTBweCA1MHB4IHJnYmEoMzcsOTksMjM1LDAuMTgpOw%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIl19%2Cp_Ii9saWJyYXJ5L2FycmFuZ2VtZW50dmlldy9vdmVybGF5LWFycmFuZ2VtZW50LXN0eWxlIg%2Cs_MPQVVPmiGrBzUdIN.png" "twitter:title": "Overlay Arrangement Style | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPhone Duo](https://exploreswiftui.com/duo?element=250) # **Overlay Arrangement Style** An arrangement view style that layers the primary view over the secondary view in z-order. ![Overlay Arrangement Style - Preview Not Available](https://exploreswiftui.com/api/images/250/variants/1777?v=1790584733410&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 27.1+ iPadOS 27.1+ ### **Tags** ### **SwiftUI Code** [ Docs](https://developer.apple.com/documentation/swiftui/arrangementviewstyle/overlay) ``` ArrangementView { Color.blue .frame(width: 210, height: 210) } secondary: { Color.orange } .arrangementViewStyle(.overlay) ``` ### **Found an issue or have a suggestion?** Created: September 28, 2026Updated: September 28, 2026 ### **More ArrangementView Components ** [**View all **](https://exploreswiftui.com/library/arrangementview) ![Overlay Arrangement ZIndex - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/252/variants/1906?v=1792480289764&r=2&w=412&q=75&f=webp) ### **Overlay Arrangement ZIndex** The z-index for a view within an overlay arrangement view. ![Overlay Arrangement Edge - iOS on iPhone Duo - Landscape - Partially Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/251/variants/1787?v=1790586084694&r=2&w=412&q=75&f=webp) ### **Overlay Arrangement Edge** The horizontal edge a view in an overlay arrangement occupies when the arrangement transitions to a horizontal layout. In this case, the primary view overlays the secondary view at the trailing edge when the screen is partially open in landscape. ![Only Horizontal Split Arrangement Style - iOS on iPhone Duo - Portrait - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/245/variants/1614?v=1791207712827&r=2&w=412&q=75&f=webp) ### **Only Horizontal Split Arrangement Style** Creates a horizontal split arrangement only in portrait orientation. In landscape orientation, no split is applied. ![Split Arrangement Layout Ratio - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/244/variants/1564?v=1790273511100&r=2&w=412&q=75&f=webp) ### **Split Arrangement Layout Ratio** Sets the preferred size ratio for an arrangement view in a split style. Use this modifier when you want to customize the size of the view compared to its other views in the split layout. ![ArrangementView - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/243/variants/1530?v=1790273526551&r=2&w=412&q=75&f=webp) ### **ArrangementView** Creates an arrangement view with a primary and secondary view. ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![Hidden List Section Separator - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/119/variants/293?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Hidden List Section Separator** Sets whether to hide the separator associated with a list section. ![ControlGroup - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/53/variants/163?v=1790073478842&r=2&w=412&q=75&f=webp) ### **ControlGroup** Creates a new ControlGroup with the specified children ![Background Extension Effect - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/91/variants/422?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Background Extension Effect** Adds the background extension effect to the view. The view will be duplicated into mirrored copies which will be placed around the view on any edge with available safe area. Additionally, a blur effect will be applied on top to blur out the copies ![TabSection - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/157/variants/618?v=1790073478842&r=2&w=412&q=75&f=webp) ### **TabSection** A container that you can use to add hierarchy within a tab view. ![GraphicalDatePickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/62/variants/420?v=1790073478842&r=2&w=412&q=75&f=webp) ### **GraphicalDatePickerStyle** A date picker style that displays an interactive calendar or clock ![Search Tab Role - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/163/variants/663?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Search Tab Role** On Liquid Glass, this tab is placed in its own group. In left-to-right (LTR) layouts, it will always appear on the right side of the TabView. ![Navigation Split View Container Background - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/173/variants/430?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Navigation Split View Container Background** A background placement behind the content of a NavigationSplitView. ![Multiple Sources Toggle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/209/variants/633?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Multiple Sources Toggle** Creates a toggle that updates the selected property for all sources. Once toggled, all sources will have the same value. ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style#webpage","@type":"WebPage","dateModified":"2026-09-28T08:38:53.443Z","datePublished":"2026-09-28T08:31:37.844Z","description":"An arrangement view style that layers the primary view over the secondary view in z-order","name":"Overlay Arrangement Style","url":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style","breadcrumb":{"@id":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"mainEntity":{"@id":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style#article"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style#article","citation":"https://developer.apple.com/documentation/swiftui/arrangementviewstyle/overlay","dateModified":"2026-09-28T08:38:53.443Z","datePublished":"2026-09-28T08:31:37.844Z","description":"An arrangement view style that layers the primary view over the secondary view in z-order","headline":"Overlay Arrangement Style","inLanguage":"en-US","name":"Overlay Arrangement Style","thumbnailUrl":"https://exploreswiftui.com/api/images/250/variants/1777?v=1790584733410&r=2","url":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"hasPart":{"@id":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style#source-code"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@id":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style#webpage"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style#source-code","@type":"SoftwareSourceCode","codeSampleType":"full example","description":"An arrangement view style that layers the primary view over the secondary view in z-order","name":"Overlay Arrangement Style SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"ArrangementView {\n Color.blue\n .frame(width: 210, height: 210)\n} secondary: {\n Color.orange\n}\n.arrangementViewStyle(.overlay)","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"ArrangementView"},{"@type":"Thing","name":"Overlay Arrangement Style"}]},{"@id":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"ArrangementView","item":"https://exploreswiftui.com/library/arrangementview","position":2},{"@type":"ListItem","name":"Overlay Arrangement Style","item":"https://exploreswiftui.com/library/arrangementview/overlay-arrangement-style","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/250/variants/1777?v=1790584733410&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/250/variants/1777?v=1790584733410&r=2"}]} ```