I am implementing stackview in my application.
main.qml

ApplicationWindow {
id: window
width: 360
height: 520
visible: true
title: "City Explorer"
color:"#FAF7F7"

Loader {
id: splashLoader
anchors.fill: parent
source: "../AppFooter.qml"
visible: true
}


footer: TabBar {
id: appfooter
currentIndex: 0
background: Rectangle {
color: "#d6d6d6"
}

TabButton {
id: control1
background: Rectangle {
width: 44
height: 40
border.color: "#000000"
color: "#d6d6d6"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.Bottom
Image {
id: contentImage

fillMode: Image.PreserveAspectFit
}
}
onClicked: {
contentImage.source = "../images/dashboard_active.png"
contentImage1.source = "../images/settings_inactive.png"
}
}
TabButton {
id: control2
background: Rectangle {
width: 44
height: 40
color: "#d6d6d6"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Image {
id: contentImage1
fillMode: Image.PreserveAspectFit
}
}
onClicked: {
contentImage.source = "../images/dashboard_inactive.png"
contentImage1.source = "../images/settings_active.png"
contentImage2.source = "../images/bookings_inactive.png"
}
}
}

header: ToolBar {
id:appheader
visible: false
RowLayout {
spacing: 20
anchors.fill: parent

ToolButton {
id:backButton
visible: false
contentItem: Image {
fillMode: Image.Pad
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
source: stackView.depth > 1 ? "../images/back.png" : ""
}
onClicked: {
if (stackView.depth > 1) {
stackView.pop()
} else {
}
}
}

Label {
id: titleLabel
text: "City Explorer"

font.pixelSize: 20
elide: Label.ElideRight
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
}
}

StackView {
id: stackView
initialItem: Pane {
id: pane
}
}
}
SightListViewForm.ui.qml

Item {
width: 360
height: 520
property alias mouseArea: mouseArea

MouseArea {
id: mouseArea
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.fill: parent

Rectangle {
id: rectangle
x: 38
y: 21
width: 200
height: 200
color: "#e03636"

Label {
id: label
x: 61
y: 150
width: 154
height: 28
text: qsTr("Overlapping view")
z: 2
}
}
}
}
SettingsForm.ui.qml

Item {
width: 400
height: 400

Image {
id: image
x: 101
y: 85
width: 150
height: 162
source: "images/singapore.png"

Label {
id: label
x: 8
y: 100
width: 142
height: 23
text: qsTr("Label")
}
}
}
AppFotter.qml

SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: showfooter.currentIndex

DashboardListView{
id:dashboard
}

Settings{
id:setting
}
}
DashBoardListViewForm.ui.qml

Item {
id: item1
width: 360
height: 520
property alias button: button
visible: true

Button {
id: button
x: 130
y: 287
text: qsTr("Button")
onClicked: {
console.log("SightListView.qml")
stackview.push("SightListView.qml")
}
}
}

Image1
https://www.dropbox.com/s/of5tx8a37csfu ... 1.png?dl=0
image2
https://www.dropbox.com/s/7mzrgu0t67k5c ... 5.png?dl=0
image3
https://www.dropbox.com/s/b1axx31rk33lo ... 2.png?dl=0

When Initally Window loaded and on pressing button stachview.push will load new window

SightListViewForm is loaded

Now when I select the Settings icon from footer Setting view loaded, but comes behind SightListViewForm. I want settings view to come on top same for other tabs in fotter

On pressing button when view is initially loaded it calls stackview.push which loads SightListViewForm and then when I press Footer's setting icon my settings view is coming behind SightListViewForm. How do I change this behaviour of Stackview or Swipeview or I am missing something that should be added. I am not clear on this.