Absolute Layout positioning as relative

Hi, I have an issue with a 'simple' view in which I wish to show two panels at specific coordinates.

I have a Viewport with 'fit' layout and the only item is the below view.

The two panels in the lower section of the vbox should be overlapping and do so when I try in sencha fiddle but my own code shows them being positioned relatively.

Can anyone help?

View:

Code:

Ext.define('DashboardUI.view.Main', {
    extend: 'Ext.container.Container',
    alias: 'widget.app-main',


    textButtonAddHere: 'Add Here!',


    requires: [
        'Ext.layout.container.Absolute'
    ],
    layout: {
        type: 'vbox',
        align: 'stretch'
    },


    items: [{
        title: 'Top',
        xtype: 'panel',
        height: 150,
        layout: 'fit'
    }, {
        title: 'Content',
        xtype: 'panel',
        layout: 'absolute',
        flex: 1,
        defaults: {
            xtype: 'panel',
            width: 100,
            height: 100,
            border: '1px'
        },
        items: [{
            itemId: 'zone1-1',
            x: 0,
            y: 0
        }, {
            itemId: 'zone2-1',
            x: 40,
            y: 40
        }]    
   
    }]
    });

Absolute Layout positioning as relative