How is the layout system in Magento 2 actually working? It’s driving me crazy.

The layout system in Magento 2 is driving me crazy. Could anybody please help me to understand it?

I have the following default.xml in

appdesignfrontend<Vendor><Name>Magento_Themelayout

<referenceContainer name="header-wrapper"> <container name="header-wrapper" before="top.search"> <block class="MagentoFrameworkViewElementTemplate" name="test" template="Magento_Theme::html/custom.phtml" /> </container> </referenceContainer> 

The expected outcome was to insert custom.phtml before top.search

custom.phtml is in

appdesignfrontend<Vendor><Name>Magento_Themetemplateshtml

Here is a screenshot with the block names:

https://imgur.com/zYAJJm2

So I expected the new block to be on the left side of “top.search”

​

Here is the actual outcome:

https://imgur.com/ca4NN6H

​

It’s driving me crazy. I tried the whole day but I don’t understand the layout system of Magento 2.

Could anybody help me?