Home/ Questions/Q 8531835
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T09:34:37+00:00

I am trying to make something which resembles a pizza maker. Essentially, all I’m

  • 0

I am trying to make something which resembles a pizza maker.

Essentially, all I’m trying to do is add a translucent image on-top of another image.

I thought I could achieve this via CSS and the z-index property but I am having some issues.

The picture’s are overlaying just fine, but I can not get them to be positioned in the center of the table cell for the life of me.

Here is what I have come up with. But the positioning moves the pictures out of the table cell.

 <table style="width:400px" border="1">
        <tr>
                <td align="center">
                 <div style="position: fixed; z-index:100">   
                    <asp:ImageButton ID="imgbtn_pizzabase" ImageAlign="Middle" ImageUrl="~/SiteImages/pizza_test.png" runat="server" />
                </div>
                <div style="position: fixed; z-index:5000"> 
                    <asp:ImageButton ID="ImageButton1"  ImageAlign="Middle" ImageUrl="~/SiteImages/findme.png" runat="server" />
                </div> 

               </td>
        </tr>
.
.

.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t need z-index. Use absolute positioning. The element that is later in the DOM, is going to be on top.
    Also, don’t use tables to position elements. That’s just bad practice. Tables are for tabular data, which a pizza isn’t (I think).

    So in this fiddle, I got a ‘plate’ which is used as a container. On (in) the plate are divs for each layer. I’ve used a background color and an opacity, but you could use background images (or just img tags) just as well.

    Note that the plate has position: relative. A position is needed to force the layers to be absolutely positioned within the plate. That way, you can easily move the plate around and the pizza will move with it. If you need to, you can put the plate in a table cell, so you can show a table of pizza’s. The css in the fiddle will automatically fix that for you.
    You can horizontally center the plate in its parent by giving it a margin: 0 auto, that way it is centered in the parent cell.

    http://jsfiddle.net/GolezTrol/nyzrT/1/

    • 0