iPhone
UIView
z-index
iOS development
Swift programming

How to set iPhone UIView z index?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

UIKit does not have a CSS-style z-index property on UIView. The usual way to control which view appears on top is to reorder subviews within the same parent using methods such as bringSubviewToFront, sendSubviewToBack, or insertSubview. For more specialized cases, you can also adjust the underlying layer's zPosition.

Default Stacking Behavior

Within one parent view, later subviews are drawn above earlier ones. So if you do this:

swift
parentView.addSubview(redView)
parentView.addSubview(blueView)

then blueView appears above redView if they overlap.

That means the simplest "z-index" control is just managing the order in the parent view's subviews array.

The Usual UIKit Methods

To move a view above its siblings:

swift
parentView.bringSubviewToFront(blueView)

To move it behind its siblings:

swift
parentView.sendSubviewToBack(blueView)

To place it at a specific sibling index:

swift
parentView.insertSubview(blueView, at: 0)

Or relative to another sibling:

swift
parentView.insertSubview(blueView, aboveSubview: redView)
parentView.insertSubview(blueView, belowSubview: redView)

For ordinary overlapping UI, these methods are the most readable and most maintainable answer.

Complete Example

swift
1import UIKit
2
3final class ViewController: UIViewController {
4    private let redView = UIView()
5    private let blueView = UIView()
6
7    override func viewDidLoad() {
8        super.viewDidLoad()
9        view.backgroundColor = .white
10
11        redView.frame = CGRect(x: 60, y: 120, width: 140, height: 140)
12        redView.backgroundColor = .systemRed
13
14        blueView.frame = CGRect(x: 120, y: 180, width: 140, height: 140)
15        blueView.backgroundColor = .systemBlue
16
17        view.addSubview(redView)
18        view.addSubview(blueView)
19
20        view.bringSubviewToFront(redView)
21    }
22}

After bringSubviewToFront(redView), the red view sits above the blue view.

When layer.zPosition Is Useful

Every UIView has a backing CALayer, and CALayer does have a zPosition property:

swift
blueView.layer.zPosition = 10

This can work, but it should not be your default tool for ordinary sibling ordering. A changed zPosition affects layer compositing and can make the hierarchy harder to reason about, especially if touch handling, transforms, shadows, or animations are involved.

Use zPosition when you specifically need layer-level depth behavior, not just "put this sibling on top".

Important Limitation: Same Parent Matters

Subview ordering methods compare siblings inside the same parent. If two views live in different branches of the view hierarchy, calling bringSubviewToFront on one parent will not change how that view stacks against views owned by another parent.

In those situations, you may need to:

  • move the views under a common parent
  • reorder higher-level container views
  • use overlay container views intentionally

This is one reason complex iOS UIs sometimes feel confusing when developers think only in terms of a flat z-index.

Auto Layout Does Not Change the Rule

Auto Layout affects size and position, not sibling draw order. A view can be perfectly constrained and still sit behind another view simply because of the hierarchy order.

So if a view looks "hidden", do not debug only constraints. Check the stacking order too.

Common Pitfalls

The most common mistake is reaching for layer.zPosition when a simple bringSubviewToFront would have solved the problem more clearly.

Another issue is forgetting that ordering works among sibling views only. Developers also sometimes assume Auto Layout constraints determine depth. They do not. Finally, excessive zPosition usage can produce confusing rendering or hit-testing behavior if the view hierarchy is already complicated.

Summary

  • 'UIView does not expose a direct CSS-style z-index property.'
  • The normal UIKit solution is to reorder sibling views with bringSubviewToFront, sendSubviewToBack, or insertSubview.
  • Later-added siblings appear above earlier ones by default.
  • 'layer.zPosition exists, but it is a more specialized tool.'
  • If overlapping views are in different branches, fix the hierarchy rather than only tweaking one view.

Course illustration
Course illustration

All Rights Reserved.