title: Java OverlayLayout items arrangement issue
body: <p>I have an issue with placing objects inside <code>JPanel</code> which has <code>OverlayLayout</code> as layout. I am creating card game and what I want is to have a story of dropped cards on the table. For instance, I would like to have 10 or 12 cards on board, displayed in the order in which they were placed and with overlapping effect. Here is the following example of what I want to achieve:</p>
  <p><a href="https://i.stack.imgur.com/p0jZn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p0jZn.png" alt="enter image description here" /></a></p>
  <p>With the current code of adding cards to board, when I am adding max 10 cards it looks like:</p>
  <p><a href="https://i.stack.imgur.com/rDgzp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rDgzp.png" alt="enter image description here" /></a></p>
  <p>You can see figures of cards are obscured which makes it difficult to read card figure.
  The card images I am adding to board are object of custom class which extends JPanels with BufferedImage object inside:</p>
  <pre><code>@SuppressWarnings(&quot;serial&quot;)
  class CardImage extends JPanel
  {
      private BufferedImage cardImage;
      private Card card;
      private int index;
      private boolean empty;
  
      public CardImage(Card _card, boolean clickableCard, Color areaColor, String imagePath)
      {
          if (!imagePath.isEmpty()) {
              try {
                  cardImage = ImageIO.read(new File(&quot;&lt;path&gt;&quot; + imagePath));
              } catch (IOException e) {
                  e.printStackTrace();
              }
              empty = false;
          } else {
              empty = true;
          }
          setSize(71, 96);
          setPreferredSize(new Dimension(71, 96));
          setBorder(null);
          if (clickableCard) {
              setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
          }
          setBackground(areaColor);
          card = _card;
          index = 0;
      }
  
      public void setIndex(int cardIndex)
      {
          index = cardIndex;
      }
  
      public int getIndex()
      {
          return index;
      }
  
      public Card getCard()
      {
          return card;
      }
  
      @Override
      public void paintComponent(Graphics g)
      {
          super.paintComponent(g);
          if (!empty) {
              g.drawImage(cardImage, 0, 0, cardImage.getWidth(), cardImage.getHeight(), this);
          }
      }
  }
  </code></pre>
  <p>Note: I know this looks ugly I will correct that later.</p>
  <p>I need to add empty black cards as initial to fill history card stack because when I am adding cards one by one, when no previous cards was added it puts cards in wrong place. I am using <code>setAlignmentX</code>() function to adjust cards position in X-axis. For adding 10 cards I am setting alignment X to every 0.1 First card has 0.0, second 0.1, third 0.2, ... When adding cards to empty panel card container it moves cards already placed. When adding first card (alignment X set to 0.0) and no other cards was added initially it looks like:</p>
  <p><a href="https://i.stack.imgur.com/PhCUx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PhCUx.png" alt="enter image description here" /></a></p>
  <p>And after that when adding new card (with alignment 0.1) it moves all cards to the right:</p>
  <p><a href="https://i.stack.imgur.com/0a64f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0a64f.png" alt="enter image description here" /></a></p>
  <p>After adding third card (with alignment 0.3) it moves all cards to the right again:</p>
  <p><a href="https://i.stack.imgur.com/lrLSf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lrLSf.png" alt="enter image description here" /></a></p>
  <p>So this is why I need to initially add 10 or 5 black cards to make it looking like cards are added on center of card containing panel instead from left. The code for adding initial cards is following:</p>
  <pre><code>boardCardPanel.setMaximumSize(boardCardPanel.getSize());
  for (int i = 0; i &lt; 6; i++) {
      CardImage ci;
      ci = new CardImage(Card.CARD_10_CLUB, false, Color.black, &quot;&quot;);
      ci.setMaximumSize(ci.getSize());
      ci.setAlignmentX(alignmentX);
      ci.setAlignmentY(0.5f);
      boardCardPanel.add(ci);
      alignmentX += 0.1;
  }
  boardCardPanel.repaint();
  boardCardPanel.setVisible(true);
  
  
  setVisible(true);
  alignmentX = 0f;
  </code></pre>
  <p>and the code for adding one card is:</p>
  <pre><code>private void putCard()
  {
      alignmentX = 0.0f;
      try {
          CardImage ci = new CardImage(Card.CARD_10_CLUB, false, Color.BLACK, &quot;\\c&quot;+(cardIndex+2)+&quot;.gif&quot;);
          ci.setMaximumSize(ci.getSize());
          boardCardPanel.add(ci, 0);
          for (int i = 0; i &lt; boardCardPanel.getComponentCount(); i++) {
              ((CardImage)boardCardPanel.getComponent(i)).setAlignmentX(alignmentX);
              ((CardImage)boardCardPanel.getComponent(i)).setAlignmentY(0.5f);
              alignmentX += 0.2f;
          }
          if (boardCardPanel.getComponentCount() &gt; 6) {
              boardCardPanel.remove(boardCardPanel.getComponentCount()-1);
          }
          System.out.println(boardCardPanel.getComponentCount());
          cardIndex = (cardIndex + 1) % 9;
          boardCardPanel.repaint();
          boardCardPanel.setVisible(true);
      } catch (Exception e) {
          e.printStackTrace();
      }
  }
  </code></pre>
  <p>So the question is how to make card history with overlapping images and adjust the overlapping indent in panel and make card history in center?</p>