Perfectly overlapping Q labels

[MyNameIsQt]

I've posted a question before as well. Make the button visible on top of the image. The button is always centered at the bottom of the window.
My code is below.

ui->setupUi(this);

    imageLabel = ui->label;
    imageLabel->setStyleSheet("QLabel { background-color:#444;}");
    imageLabel->setBackgroundRole(QPalette::Base);
    imageLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    imageLabel->setContentsMargins(0, 0, 0, 0);
    imageLabel->setScaledContents(true);
    imageLabel->setAlignment(Qt::AlignCenter);

    buttonLayout = new QHBoxLayout(ui->buttonLabel);
    buttonLayout->addWidget(ui->beginBtn);
    buttonLayout->addWidget(ui->prevBtn);
    buttonLayout->addWidget(ui->nextBtn);
    buttonLayout->addWidget(ui->endBtn);
    buttonLayout->setAlignment(Qt::AlignBottom | Qt::AlignCenter);

    buttonLabel = ui->buttonLabel;
    buttonLabel->setStyleSheet("QLabel { background-color: rgba(45, 45, 45, 0.5); }");
    buttonLabel->setBackgroundRole(QPalette::Base);
    buttonLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
    buttonLabel->setFixedHeight(buttonLayout->sizeHint().height());
    buttonLabel->setContentsMargins(0, 0, 0, 0);

    mainLayout = new QVBoxLayout(this);
    mainLayout->addWidget(imageLabel);
    mainLayout->addWidget(buttonLabel);

    setCentralWidget(new QWidget);
    centralWidget()->setLayout(mainLayout);

As you can see, this doesn't work correctly.

    mainLayout = new QVBoxLayout(this);
    mainLayout->addWidget(imageLabel);
    mainLayout->addWidget(buttonLabel);

QVBoxLayout divides top and bottom.
If I do that, the vertical height of the button is not constant depending on the image size.

I want the labels to overlap.
I want the button labels to span the entire screen and have the buttons below it.
Like this..

How can I solve it?

[SGaist]

Hi,

QStackedWidget comes to mind for that. Put your labels in it and the buttons underneath.