Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Anchoring element's centers to the top of another element/ Overlaying elements



  • Hi there,

    Can someone point in the right direction to achieve overlaying two QML elements as depicted in the picture below?

    0_1536530823953_overlayExample.png

    The purple item needs to be centered right at the top of the pink item through some method. Please advise!



  • @abanksdev

        Rectangle {
            id: rect1
            y: 200
            height: 100
            width: 500
            color: "pink"
        }
    
        Rectangle {
            anchors.horizontalCenter: rect1.horizontalCenter
            anchors.verticalCenter: rect1.top
            height: 100
            width: 100
            color: "purple"
        }
    

    0_1536545707186_4b896129-d9df-42f4-8cdd-b86488ee2ce1-image.png

    Or, if you meant:

    0_1536546038865_1b4a93cd-e691-458f-aa3b-f20a9e6a882f-image.png

        Rectangle {
            anchors.horizontalCenter: rect1.horizontalCenter
            anchors.bottom: rect1.top
            height: 100
            width: 100
            color: "purple"
        }
    

Log in to reply