片段替换导致重叠片段

Question

我正在尝试使用以下代码将片段替换为另一个片段：

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;


public class MyAccountFragment extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    RelativeLayout rootView =  (RelativeLayout) inflater.inflate(R.layout.fragment_account, container, false);

    Button signupButton = (Button) rootView.findViewById(R.id.sign_up);
    signupButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            Fragment signupFragment = new SignUp();
            FragmentManager fragmentManager = getFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.replace(R.id.loginFragment, signupFragment);
            fragmentTransaction.addToBackStack(null);
            fragmentTransaction.commit();

        }
    });

    return rootView;
}

当它运行时，我会在屏幕上重叠两个片段。如果我尝试调用remove（）和add（）而不是我得到错误

我不知道如何让背景片段消失当新的片段被添加到容器中时。