title: Fragments overlapping each other
body: <p>I have an action bar with 3 tabs, each tab opens a fragment. The third tab, "Catalog", has a list:
  <img src="https://i.stack.imgur.com/893nW.png" alt="enter image description here"></p>
  
  <p>When I click on an item it opens another fragment, which is not part of the action bar:</p>
  
  <pre><code>public void onClick(View v) {
      switch (v.getId())
      {
      case R.id.category1:    
          Fragment cosmeticsFragment = new ActivityCosmetics();
          FragmentTransaction transaction = getFragmentManager().beginTransaction();
  
          transaction.replace(android.R.id.content, cosmeticsFragment);
          transaction.addToBackStack(null);
  
          transaction.setTransition(1);
  
          transaction.commit();
          break;
          ...
  </code></pre>
  
  <p>This is what it looks like after that:
  <img src="https://i.stack.imgur.com/Ti1KE.png" alt="enter image description here"></p>
  
  <p>From this point, if I go to other tab and then return to the Catalog tab, I see the 2 previous fragments overlapping each other:</p>
  
  <p><img src="https://i.stack.imgur.com/Pufgz.png" alt="enter image description here"></p>
  
  <p>How do I prevent it from happening?</p>