We help IT Professionals succeed at work.

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

FaheemAhmadGul
on
285 Views
Last Modified: 2017-03-10
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.
<div>
    <input type="button" height="90" style="width:400px; background-color: red;" value="I am in behind" />
</div> 
<div>
    <input type="button" height="90" style="width:400px; background-color: green;" value="I am in front" />
</div> 


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


<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>

       
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" ></ColumnDefinition>
                <ColumnDefinition Width="1*" ></ColumnDefinition>
                
            </Grid.ColumnDefinitions>
<Button Name="One" Grid.Row="0" Grid.Column="0" ></Button>
<Button Name="Two" Grid.Row="0" Grid.Column="0" ></Button>
</Grid>

Open in new window

Comment
Watch Question

This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Many thanks. I am very grateful. Both solutions were helpful, but as Julina's solution was more thorough with a working a example, I found it more helpful. I was away from my desk hence some delay in accepting the solutions.
Thank you very much again.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
I would like to achieve this without using absolute positioning.
Just pointing out the first solution uses absolute positioning

Otherwise you are most welcome.

Author

Commented:
Thank you Julian. I realise that now. The first solution did not fully answer my question. Many thanks again for you kind help.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions