Frame not appearing when it is supposed to... (ROBLOX GUI) - user-interface

Question

I am making an Os module that lets you create remote Operating systems but when the background frame loads in a new window just an random window loads in but it just basically gets "overwritten" by the background frame.
I have a post on scriptinghelpers: https://scriptinghelpers.org/questions/116285/instancenew-but-not-working-as-expected-module
but it seems that no one wants no one on the website knows how to do it
my code for the main Os module:
local module = {}
function module.__Version__()
local ROS = '1.00'
local ROS = tostring(ROS)
print('Version: '..ROS)
end
function module.create_environment(master)
local main = Instance.new('ScreenGui',master)
main.Name = ("ROS")
return(main)
end
function module.create_background(env)
local Frame = Instance.new('Frame',env)
Frame.Name = ('Background')
Frame.Size = UDim2.new(2,0,2,0)
Frame.Position = UDim2.new(0, 0,-0.5, 0)
Frame.BackgroundColor3 = Color3.new(0.337255, 0.290196, 1)
return(Frame)
end
function module.create_taskbar(env)
local main = Instance.new("Frame",env)
main.BackgroundColor3 = Color3.new(0, 0, 0)
main.Size = UDim2.new(2, 0,0, 45)
main.Position = UDim2.new(-0.5, 0,1, -45)
return(main)
end
function module.create_app_button(icon,env,X,Y)
local Btn = Instance.new('ImageButton',env)
Btn.Image = (tostring(icon))
Btn.Size = UDim2.new(0, 49,0, 49)
Btn.Position = UDim2.new(0, tonumber(X), 0, tonumber(Y))
return(Btn)
end
function module.create_clone_env(env)
local coloned_env = env:Clone()
coloned_env.Parent = env.Parent
end
function module.create_time_gui(env)
local main = Instance.new('TextLabel',env)
main.Size = UDim2.new(0, 115,0, 41)
main.Position = UDim2.new(1, -145,1, -44)
main.TextColor3 = Color3.new(1, 1, 1)
main.BackgroundTransparency = 1
main.TextScaled = true
main.Font = Enum.Font.Ubuntu
local assetId = 5990705305
local InsertService = game:GetService("InsertService")
local model = InsertService:LoadAsset(assetId)
model.Time_Manager.Parent = main
return(main)
end
function module.create_start_button(env)
local main_button = Instance.new('TextButton',env)
main_button.Size = UDim2.new(0, 146,0, 45)
main_button.Position = UDim2.new(0, 0,1, -44)
main_button.TextColor3 = Color3.new(0, 0, 0)
main_button.Text = "Start"
main_button.TextSize = 25
main_button.Font = Enum.Font.Arial
main_button.BorderSizePixel = 0
return(main_button)
end
function module.create_app(env)
local frame = Instance.new('Frame',env)
local round = Instance.new("UICorner",frame)
local top_frame = Instance.new('Frame',frame)
local exit_button = Instance.new('TextButton',top_frame)
local assetId = 5995055509
local InsertService = game:GetService("InsertService")
local model = InsertService:LoadAsset(assetId)
round.CornerRadius = UDim.new(0,20)
frame.Size = UDim2.new(0, 1084,0, 673)
frame.Position = UDim2.new(0.5, -542,0.5, -336)
frame.BackgroundColor3 = Color3.new(1, 1, 1)
top_frame.Size = UDim2.new(1, 0,0.003, 28)
top_frame.Position = UDim2.new(0, 0,0, 0)
top_frame.BackgroundColor3 = Color3.new(0.611765, 0.611765, 0.611765)
top_frame.BorderSizePixel = 0
exit_button.Size = UDim2.new(0, 74,0, 30)
exit_button.Position = UDim2.new(1, -74,0.5, -15)
exit_button.Text = ("X")
exit_button.BorderSizePixel = 0
exit_button.TextColor3 = Color3.new(1, 1, 1)
exit_button.BackgroundColor3 = Color3.new(1, 0, 0)
exit_button.TextStrokeTransparency = 0
exit_button.TextSize = 17
model.LocalScript.Parent = exit_button
model:Destroy()
return(frame)
end
return module
Everything works; create_taskbar(),create_time_gui(),create_start_button()
But its just the create_app()
This is what my Os-module made:
This is the OS my Os-module made:
As i said the background overwrites my create_app() is there a way to prevent this?

Answer 1

If maintaining the element hierarchy is important, try adjusting the ZIndex of the background frame and the app so that the two aren't fighting for which one appears on top. Elements with smaller numbers for their ZIndex will render first, meaning they will appear behind elements with larger ones.
function module.create_background(env)
local Frame = Instance.new('Frame',env)
Frame.ZIndex = 1
-- <a bunch of other code>
return Frame
end
And then make the app's ZIndex higher.
function module.create_app(env)
local frame = Instance.new('Frame', env)
frame.ZIndex = 2
-- <a bunch of other code>
return frame
end
But you should be careful. Messing with ZIndices can get really messy really quick. A better alternative would be to just set the app Frame's parent to the background Frame.