JavaFx - When selecting a text field, text field changes its scale and it effects the other items in flowpane. How to get rid of it

Question

There is group of items (three textfield and a button). One of the textfields is in an other group (to put an mouse transparent image on it). When this textfield is selected the parent group get bigger for a fex pixels and all of the flowpane items get shifted. How can i get rid of this beheivor.

            <Group layoutX="123.0" layoutY="74.0">
               <children>
                  <FlowPane prefHeight="25.0" prefWidth="283.0">
                     <children>
                        <Group>
                           <children>
                              <TextField prefHeight="25.0" prefWidth="72.0" />
                           </children>
                        </Group>
                        <TextField prefHeight="25.0" prefWidth="82.0" />
                        <TextField prefHeight="25.0" prefWidth="76.0" />
                        <Button mnemonicParsing="false" text="Button" />
                     </children>
                  </FlowPane>
               </children>
            </Group>

Seen here:

_{Note: Code and gif created to demonstrate the problem.}

I want textfield to not change its parents sizes even his size changes. Or any other solution.

Answer 1

_{@jewelsea 's comment solves the problem.}

Using a StackPane to put components on top each other doesn't disturb the layout like using Group container does.

_{So we can say; To put two components on top of each other use StackPane in fxml.}