How can I set a ui image canvas to be in front of anything else?

Question

In the Hierarchy I have a Canvas set to Screen Space - Overlay the canvas name is Scene Fader. and a child disabled ui Image and also a child name Scene Fader Child that is a gameobject with a script attached to it name Scene Fader :

The script that attached to Scene Fader Child is :

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;
 
public class SceneFader : MonoBehaviour
{
    #region FIELDS
    public GameObject fadeOutUIGameobjectImage;
    public float fadeSpeed = 0.8f;
    //public SaveLoad saveLoad;
 
    private Image fadeOutUIImage;
 
    private void Start()
    {
        SceneManager.sceneLoaded += SceneManager_sceneLoaded;
    }
 
    public enum FadeDirection
    {
        In, //Alpha = 1
        Out // Alpha = 0
    }
    #endregion
 
    #region FADE
    public IEnumerator Fade(FadeDirection fadeDirection)
    {
        fadeOutUIGameobjectImage.SetActive(true);
 
        float alpha = (fadeDirection == FadeDirection.Out) ? 1 : 0;
        float fadeEndValue = (fadeDirection == FadeDirection.Out) ? 0 : 1;
        if (fadeDirection == FadeDirection.Out)
        {
            while (alpha >= fadeEndValue)
            {
                SetColorImage(ref alpha, fadeDirection);
                yield return null;
            }
            fadeOutUIGameobjectImage.SetActive(false);
        }
        else
        {
            fadeOutUIGameobjectImage.SetActive(true);
            while (alpha <= fadeEndValue)
            {
                SetColorImage(ref alpha, fadeDirection);
                yield return null;
            }
        }
    }
    #endregion
 
    #region HELPERS
    public IEnumerator FadeAndLoadScene(FadeDirection fadeDirection, string sceneToLoad)
    {
        yield return Fade(fadeDirection);
 
        SceneManager.LoadScene(sceneToLoad);
    }
 
    private void SceneManager_sceneLoaded(Scene arg0, LoadSceneMode arg1)
    {
        if (MenuController.LoadSceneForSavedGame == true)
        {
            var saveLoad = GameObject.Find("Save System").GetComponent<SaveLoad>();
            saveLoad.Load(null, null);
        }
 
        if(MouseHover.loadingwithfolder)
        {
            var saveLoad = GameObject.Find("Save System").GetComponent<SaveLoad>();
            saveLoad.Load(MouseHover.folder, MouseHover.savedGameFName);
            MouseHover.loadingwithfolder = false;
        }
    }
 
    private void SetColorImage(ref float alpha, FadeDirection fadeDirection)
    {
        if(fadeOutUIImage == null)
        {
            fadeOutUIImage = fadeOutUIGameobjectImage.GetComponent<Image>();
        }
 
        fadeOutUIImage.color = new Color(fadeOutUIImage.color.r, fadeOutUIImage.color.g, fadeOutUIImage.color.b, alpha);
        alpha += Time.deltaTime * (1.0f / fadeSpeed) * ((fadeDirection == FadeDirection.Out) ? -1 : 1);
    }
    #endregion
}

When in this script I'm enabling true the fadeOutUIGameobjectImage I want that this Image will become in front of anything else all the ui elements and other stuff.

Now there is some ui elements that are in front of it.

This screenshot show the default main menu when running the game :

Then when starting a new game everything is fade out the screen get black using the Scene Fader script but the left ui element is in front of the image in the scene fader script :

Answer 1

The solution is to change the canvas sort order to value 1.

For testing I enabled the Image and set the Image alpha color to 255. Then in the canvas Scene Fader I set the Sort Order to 0. The result :

Now I changed the Sort Order to 1 :

In other words the solution is to set the canvas that should fade out it's sort order value to be any value bigger then all the other ui elements. In this case the value 1 is high enough.

And because I'm changing the image alpha color back to 0 when I get back to the main menu in the game I don't have to change the canvas sort order again.