SwiftUI layers in HStack

Question

When I drag the rectangle to the left, the symbol is under the rectangle but on the right the symbol is over the rectangle, when I drag it to the right. I know, that the hierarchy of the HStack decides the layer but if I would do the right symbol over the rectangle, then both of the symbols are on the right side. I'm new at SwiftUI

HStack(spacing: 0.0){
                    
         Image(systemName: "lessthan.square")
            .resizable()
            .frame(width: 20.0, height: 20.0)
            .padding(.leading, 30.0)
        
        ZStack(alignment: .center) {
            
            Group {
                Rectangle()
                        .cornerRadius(20.0)
                        .frame(width: 250, height: 150)
                        .foregroundColor(Color(.white))
                        .position(rectPosition)
                        .shadow(radius: 5)
            
            VStack{
             Text("i")
                .font(.system(size: 30))
             Text("l")
                .font(.system(size: 25))
                }.position(rectPosition)
                
            }.gesture(DragGesture().onChanged({ value in
            self.rectPosition = CGPoint(x: value.location.x, y: 130)
            }))
        }
        
         Image(systemName: "greaterthan.square")
         .resizable()
         .frame(width: 20.0, height: 20.0)
             .padding(.trailing, 30.0)```

Answer 1

zIndex should help you... add it to ZStack

HStack {
  Image(...)

  ZStack {
  ...
  }.zIndex(1) // << here !!

  Image(...)
}