Why does the component still occupy its original position after setting its visible value to false?

[hellorust2056]

export component Demo {
    VerticalBox {
        alignment: start;
        Rectangle {
            x: 10px;
            width: 180px;
            height: 180px;
            background: #315afd;
            visible: false;
        }
        
        Rectangle {
            x: 10px;
            width: 180px;
            height: 180px;
            background: green;
            opacity: 0.5;
        }
    }
}

[hellorust2056]

[hunger]

The element is visible but it still exists. Try this:

export component Demo {
    VerticalBox {
        alignment: start;
        if false: Rectangle {
            x: 10px;
            width: 180px;
            height: 180px;
            background: #315afd;
        }
        
        Rectangle {
            x: 10px;
            width: 180px;
            height: 180px;
            background: green;
            opacity: 0.5;
        }
    }
}

That removes the Rectangle completely.

I found your x: 10px; pretty surprising: Yes, the VerticalBox controls the y position only, so this is legal, but it moves the Rectangle outside its reserved space of 180px times 180px: You will notice the rectangle is 10px higher than it is wide.