Swipeview is not showing screen when used with stackview

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")
            }
    }
}

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.

It turns out I have to keep stackview in footer instead of main.qml

DashboardListView{
    id:dashboard
        StackView {
           id: stackView

           initialItem: Pane {
              id: pane
           }
        }
    }

and

Create AppFooter in main.qml

AppFooter{
    id:appfooterglobal
    visible: false
}