When TextBox's are overlapped, the one defined earlier in the ASPX is not clickable

I have many controls; and based on the condition, some of them become hidden and the rest are visible. To simplify, let’s say there are 2 TextBoxes, txtName and txtEmail, with the same x/y coordinates, e.g.:

<div style="position: absolute; top: 55px; left: 5px; width: 120px; height: 20px">
	<asp:TextBox ID="txtEmail" ClientIDMode="Static" Width="100" runat="server" />
</div>
<div style="position: absolute; top: 55px; left: 5px; width: 120px; height: 20px">
	<asp:TextBox ID="txtName" ClientIDMode="Static" Width="100" runat="server" />
</div>

Sometimes, I want to hide txtEmail. Othertimes, I want to hide txtName. For example, on loading time, I hide txtName like this:

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{
		txtName.Visible = false;	// txtName.Style.Add("display", "none"); same result
		txtName.Enabled = false;
		txtEmail.Visible = true;	// txtEmail.Style.Add("display", "block"); same result
		txtEmail.Enabled = true;
	}
}

Now the problem is the textbox is not clickable. In the ASPX file, txtEmail appears first, and then txtName. So although I hide txtName, it blocks my mouse-click on txtEmail.

How can I correct this without changing the order of asp:TextBox-es?

Ok, the issue and problem are that you hiding (and showing) the text box, but the 2 div’s you have are still visible, and they are what you wind up clicking on.

Thus, you don't really need to disable the text box controls, but only hide (or show) the div they reside inside of. And note that while setting style="display:none" often looks to produce the same result as SomeControl.Visible = false?

No, there is a VAST difference, since when you use code behind and set a control visible = false?

The control is not sent, and not rendered client side. That means client-side JavaScript code can't select, use, nor modify such controls.

Regardless of the above HUGE difference between using style to hide a control vs. that of using visible = false?

The simple approach here is to hide (or show) your 2 divs, and you be fine. And since you using "visible" then based on above, we don't need to enable, nor disable the text box controls anyway. (They will not even be rendered and sent to the client-side browser).

Using .visible with the div is a better approach, since then when browser markup is rendered, you actually don’t have 2 divs overlapping each other (since as noted, any div or control with visible = false is not sent to the client-side browser).

Markup:

        <div id="mydiv1" runat="server" 
            style="position: absolute; top: 55px; left: 5px; width: 120px; height: 20px">
            <asp:TextBox ID="txtEmail" ClientIDMode="Static" Width="100" runat="server" />
        </div>
        <div id="mydiv2" runat="server"  style="position: absolute; top: 55px; left: 5px; width: 120px; height: 20px">
            <asp:TextBox ID="txtName" ClientIDMode="Static" Width="100" runat="server" />
        </div>

Code behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            mydiv1.Visible = false;
            mydiv2.Visible = true;
        }
    }

So, hide (or show) the container. The added bonus of above is you can have multiple controls and markup inside of either div, and thus your server-side code can show/hide that group of controls by using the .visible property of that div control.

And thus, often in place of several commands to hide or show individual controls? Group them inside of a div, add the runat="server" tag to that div along with the "id" tag.

You now can hide or show that group of controls with one line of code behind.