====== Positioning elements ======

===== Absolute positioning =====
{{youtube>sgQbKeIGf5M?small}}

    * You can define an item's position and size within its parent.
<file javascript basic-positioners.qml>
import QtQuick 1.0

Item {
    width: 400
    height: 400

    Image {
        anchors.fill: parent
        source: "images/background.png"
    }

    Image {
        id: spaceship
        source: "images/spaceship.png"
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
    }
}</file>

===== Relative positioning =====
{{youtube>2BpsjJmhmH0?small}}
  * **Anchors** provide a way to position an item by specifying its relationship with other items.
<file javascript anchors-positioners.qml>
import QtQuick 1.0

Item {
    width: 400
    height: 400

    Image {
        anchors.fill: parent
        source: "images/background.png"
    }

    Spaceship {
        id: spaceship
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
    }
}</file>
==== Multiple items ====
{{youtube>fNOgIexwe2w?small}}
  * Many ways to specify how an item is related to another:
    * ''anchors.right'', ''anchors.rightMargin'' ...
<file javascript more-anchors-positioners.qml>
import QtQuick 1.0

Item {
    width: 400
    height: 400

    Image {
        anchors.fill: parent
        source: "images/background.png"
    }

    Image {
        id: spaceship
        source: "images/spaceship.png"
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Image {
        id: anotherSpaceship
        source: "images/spaceship.png"
        scale: 0.5
        smooth: true
        anchors.top: spaceship.bottom
        anchors.right: spaceship.right
        anchors.rightMargin: 100
    }
}
</file>

====== Resources ======
  * {{:qt-quick-for-designers-1:images.zip|}}
  * All source code is subject to this [[copyright header|copyright]].