troubleshooting Question

Using HTML5 and CSS How to place one element in front of another elemen

Avatar of FaheemAhmadGul
FaheemAhmadGulFlag for United Kingdom of Great Britain and Northern Ireland asked on
7 Comments3 Solutions317 ViewsLast Modified:
In an HTML5 page I would like to put one element exactly in front of another so that it completely covers the one which is behind.
So in the HTML code I have put in the code window I would like the user to see only the the element which is in front. I would like to achieve this without using absolute positioning.

In WPF application, using XAML I can achieve this very easily. So if have a Grid Cell and put a a button in it and then put another button in the same cell. The second button completely overlaps the first button. I would like to achieve the same kind of thing in HTML5 and would appreciate guidance on how to achieve this.
At the moment on my page red and green button are displayed one above another. I would like the green button to completely overlap red button.

To clarify my question I am putting a XAML example with HTML code.
    <input type="button" height="90" style="width:400px; background-color: red;" value="I am in behind" />
    <input type="button" height="90" style="width:400px; background-color: green;" value="I am in front" />

// In the WPF XAML example Button two will completely overlap button one. 

            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>

                <ColumnDefinition Width="1*" ></ColumnDefinition>
                <ColumnDefinition Width="1*" ></ColumnDefinition>
<Button Name="One" Grid.Row="0" Grid.Column="0" ></Button>
<Button Name="Two" Grid.Row="0" Grid.Column="0" ></Button>
Join our community to see this answer!
Unlock 3 Answers and 7 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 3 Answers and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros