Member Avatar for mikefitz

Hi,
How can I position one elemenent on top of another within a table cell? I need the <TextBox> element positioned on top of the <input> element. The second element, the <TextBox>, is currently displaying below the <input> element. I tried using the left, top, display, and position style attributes with no luck. Below is the code.

Thanks,
Mike

<tr>
<td align="left" style="width:765px;">
<input id="txtArtwork" style="Z-INDEX: 149; WIDTH: 724px; HEIGHT: 22px;" tabindex="17" type="file" src="//localhost/ArtworkAttachments" size="101" name="MyFile" runat="Server">
<asp:TextBox id="txtSelectedFile" style="Z-INDEX: 149;" runat="server" Width="642px" tabIndex="18"></asp:TextBox>
</td>
</tr>

  • 2 Contributors
  • 2 Replies
  • 121 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by mikefitz

Dani AI

Generated

's wrapper approach is the right pattern and explains why the textbox landed above the file input: the textbox needs to be positioned relative to a positioned ancestor and given a higher stacking order. confirmed this worked, which typically means the containing block and stacking context are now set correctly.

If the overlay doesn't appear or doesn't sit where expected, run this checklist:

  • Verify the overlay and the element you want it over are in the same positioned container (table cells can be given positioning too).
  • Remember z-index affects only positioned elements and is scoped by stacking contexts; a parent with its own stacking context can prevent a child from overlapping outside it.
  • Use your browser dev tools to inspect computed styles (position, z-index, overflow, width/height) to find unexpected values or clipping.
  • Watch for overflow:hidden on ancestors which can clip absolutely positioned children.

If the textbox must remain interactive while sitting on top of the file input, prefer semantic approaches over hacks. Use a visible label (or a styled control) that triggers the file input so clicks and keyboard access remain reliable and accessible. If the overlay is purely decorative, pointer-events can make it click-through to the underlying control, but that also disables interaction with the overlay itself. Test these behaviors across target browsers, since form controls and OS-native widgets can behave differently.

For more on the mechanics and cross-browser considerations, see the MDN references on stacking and layout: position, z-index, and label/input file accessibility and input type=file.

Recommended Answers

All 2 Replies

Member Avatar for macneato

Try something like this:

<style>
    		.wrapper {
    			position:relative;
    		}
			
			#txtSelectedFile {
				position:absolute;
				top:0;
				left:0;
				z-index:150;
			}
    	</style>
		
        <div class="wrapper">
            <input id="txtArtwork" style="Z-INDEX: 149; WIDTH: 724px; HEIGHT: 22px;" tabindex="17" type="file" src="//localhost/ArtworkAttachments" size="101" name="MyFile" runat="Server">
            <asp:TextBox id="txtSelectedFile" style="Z-INDEX: 149;" runat="server" Width="642px" tabIndex="18"></asp:TextBox>
        </div>

Should do the trick

Member Avatar for mikefitz

Yes, that worked!

Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.