Fragmentでreplaceしてもレイアウトが重なる

現在Fragmentを使ってアプリを作っているのですが、Fragmentの使い方がイマイチ分かっていません。最初はlayout.xmlで指定したFragmentにaddやreplaceをしていたのですが、それではうまく機能しないということが分かったので、以下のコードのようにしてみたのですが、ボタンを押したときにFragmentAのレイアウトとFragmentBのレイアウトが重なってしまいます。色々調べてみてもFragmentの使い方がイマイチ分からず困っています。どうすればFragmentを使ってレイアウトを切り替えることができるでしょうか？すみませんが、よろしくお願いします。

layout

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

</RelativeLayout>

activity

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FragmentManager manager = getFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.replace(R.id.container, new FragmentA());
        transaction.addToBackStack(null);
        transaction.commit();

        Button button = (Button)findViewById(R.id.btn); {
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    FragmentManager manager = getFragmentManager();
                    FragmentTransaction transaction = manager.beginTransaction();
                    transaction.add(R.id.container, new FragmentB());
                    transaction.addToBackStack(null);
                    transaction.commit();
                }
            });
        }
    }