title: JavaFX Pane z-order
body: <p>I'm starting a small high-performance charting library for JavaFX because supplied chart libraries are still buggy and were not designed to show huge amount of points (20k+).</p>
  
  <p>My custom chart class was extending <code>StackPane</code>but this doesn't allow me to explicitly position elements as explained <a href="https://stackoverflow.com/questions/21118394/explicitly-positioning-nodes-in-javafx" title="here">here</a> and I had this issue. So now I moved to <code>Pane</code> but <code>Pane</code> doesn't seems to allow a z-order despite lot of people saying that z-order is implemented according to the <code>Node</code> position in the children list.</p>
  
  <p>This is what I get when extending <code>StackPane</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/ss0J6.jpg" alt="enter image description here"></p>
  
  <p>And this is when I use <code>Pane</code> instead:</p>
  
  <p><img src="https://i.stack.imgur.com/W4fcx.jpg" alt="enter image description here"></p>
  
  <p>As you can see the lines are not showed anymore. Here is how I add my nodes:</p>
  
  <pre><code> private Pane chartBackground = new Pane();
      private Pane chartPlotPane = new Pane();
      private XYAxis xAxis = new XYAxis();
      private XYAxis yAxis = new XYAxis();
  
  getChildren().addAll(chartBackground, xAxis, yAxis);
  </code></pre>
  
  <p>Where <code>XYAxis</code> are just the black lines. Here is the full code if you need it:</p>
  
  <pre><code>public class XYChart&lt;X extends Number,Y extends Number&gt; extends Pane{
  
      private ArrayList&lt;XYSeries&lt;X,Y&gt;&gt; seriesList = new ArrayList&lt;&gt;();
  
      // Components
      private Pane chartBackground = new Pane();
      private Pane chartPlotPane = new Pane();
      private XYAxis xAxis = new XYAxis();
      private XYAxis yAxis = new XYAxis();
  
      // Properties
      private Color BG_COLOR = Color.valueOf("EDEDED");
      private Color PLOT_PANE_COLOR = Color.RED;
      private double yPadding = 20, xPadding = 20;
  
      public XYChart(){
          getChildren().addAll(chartBackground, xAxis, yAxis);
  
          chartBackground.setStyle("-fx-background-color:" + BG_COLOR.toString().substring(2) + ";");
          chartPlotPane.setStyle("-fx-background-color:" + PLOT_PANE_COLOR.toString().substring(2) + ";");
          chartPlotPane.setMouseTransparent(true);
  
          setOnMouseDragged(event -&gt; {
              chartPlotPane.setLayoutX(event.getSceneX());
              chartPlotPane.setLayoutY(event.getSceneY());
  
              System.out.println("Drag x: " + event.getX());
          });
  
          redraw();
      }
  
      public void addSeries(XYSeries&lt;X,Y&gt; series){
          seriesList.add(series);
      }
  
      public void removeSeries(int index){
          seriesList.remove(index);
      }
  
      private void drawAxes(){
          xAxis.setAxisWidth(getPrefWidth() - 2*xPadding);
          xAxis.setAxisHeight(10);
  
          yAxis.setAxisWidth(10);
          yAxis.setAxisHeight(getPrefHeight() - 2*yPadding);
  
          // Set X axis position
          xAxis.setAxisX(getLayoutX() + yAxis.getAxisWidth() + xPadding);
          xAxis.setAxisY(getLayoutY() + yAxis.getAxisHeight() + yPadding);
  
          // Set Y axis position
          yAxis.setAxisY(xAxis.getAxisY());
          yAxis.setAxisX(xAxis.getAxisX());
  
          xAxis.redraw();
          yAxis.redraw();
      }
  
      public void redraw(){
          drawAxes();
  
          // Chart background
          chartBackground.setPrefWidth(getPrefWidth());
          chartBackground.setPrefHeight(getPrefHeight());
          chartBackground.setLayoutX(getLayoutX());
          chartBackground.setLayoutY(getLayoutY());
  
          /*
          // Chart plotting pane
          chartPlotPane.setLayoutX(xAxis.getAxisX());
          chartPlotPane.setLayoutY(yAxis.getAxisY() - yAxis.getAxisHeight());
  
          chartPlotPane.setPrefWidth(xAxis.getAxisWidth());
          chartPlotPane.setMaxWidth(xAxis.getAxisWidth());*/
  
          chartPlotPane.setPrefHeight(yAxis.getAxisHeight());
          chartPlotPane.setMaxHeight(yAxis.getAxisHeight());
      }
  
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is a simple code snippet trying to do what I explaining:</p>
  
  <pre><code>import javafx.application.Application;
  import javafx.scene.Scene;
  import javafx.scene.layout.Pane;
  import javafx.stage.Stage;
  
  public class PaneTest extends Application {
  
      @Override
      public void start(Stage primaryStage) throws Exception {
  
          Pane bgPane = new Pane();
          Pane pane1 = new Pane();
          Pane pane2 = new Pane();
  
          bgPane.setStyle("-fx-background-color: white;");
          pane1.setStyle("-fx-background-color: red;");
          pane2.setStyle("-fx-background-color: blue;");
  
          pane1.setLayoutX(0);
          pane1.setLayoutY(0);
          pane2.setLayoutX(100);
          pane2.setLayoutY(100);
  
          bgPane.getChildren().addAll(pane1, pane2);
  
          Scene scene = new Scene(bgPane, 800, 600);
          primaryStage.setScene(scene);
          primaryStage.show();
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  </code></pre>