Anroid. Fragment. Проблема с заменой фрагмента

в приложении есть ViewPager c фрагментами и в каждом из них есть список RecyclerView. при нажатии на каждый item списка создается новый фрагмент методом replace(). Проблема: созданный фрагмент располагается по верх всего(как и задумывалось), но его задний фон всё равно работает, т.е. ViewPager с фрагмента( в которых RecyclerView + OnClickListener)

activity_start.xml

`public class ProductDetailFragment extends Fragment {
    public ProductDetailFragment() {
    }
    public static ProductDetailFragment newInstance(Product product){
        ProductDetailFragment fragment = new ProductDetailFragment();
        Bundle bundle = new Bundle();
        bundle.putString("name",product.getName());
        fragment.setArguments(bundle);
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_detail, container, false);
        return view;
    }
}`

activity_main.xml

`<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/content"
    tools:context=".MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">
        </android.support.v7.widget.Toolbar>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>`

Мой OnCreate в MainActivity.java

`@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_start);
        pager = (ViewPager) findViewById(R.id.view_pager);
        pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        pager.setAdapter(pagerAdapter);
        TabLayout tabs = findViewById(R.id.tabs);
        tabs.setupWithViewPager(pager);
        tabs.setTabMode(android.support.design.widget.TabLayout.MODE_SCROLLABLE);// Make TabLayout scrollable
        pager.addOnPageChangeListener(this);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        final DrawerLayout drawer = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        //toggle.getToolbarNavigationClickListener().onClick();
        drawer.addDrawerListener(toggle);
        toggle.syncState();
        navigationView.setNavigationItemSelectedListener(this);
    }`

Мой RecyclerView Adapter + OnClickListener

`@Override
    public void onBindViewHolder(ProductDataAdapter.ViewHolder holder, final int position) {
        final Product product = products.get(position);
        holder.imageView.setImageResource(product.getImage());
        holder.nameView.setText(product.getName());
        holder.priceView.setText("$ "+product.getPrice());
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("myLog",position+"");
                ProductDetailFragment datail = ProductDetailFragment.newInstance(product);
                transaction = ((FragmentActivity)v.getContext()).getSupportFragmentManager().beginTransaction();
                transaction.replace(R.id.content, datail);
                transaction.addToBackStack(null);
                transaction.commit();
            }
        });
    }`

Класс фрагмента, который я хочу поместить

`public class ProductDetailFragment extends Fragment {
    public ProductDetailFragment() {
    }
    public static ProductDetailFragment newInstance(Product product){
        ProductDetailFragment fragment = new ProductDetailFragment();
        Bundle bundle = new Bundle();
        bundle.putString("name",product.getName());
        fragment.setArguments(bundle);
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_detail, container, false);
        return view;
    }
}`

Не хочется создавать вместо фрагмента отдельную активити. Надеюсь, что так можно как-то выкрутиться. Заранее спасибо за помощь!