Monday, 23 November 2009

What is z-index in CSS?

The z-index property will set a bottom to top display ordering of positioned elements. By positioned I mean elements that have been given a position in CSS, e.g. position:relative. This will allow you to specify elements that should appear on top when elements overlap.

My Ajax Calendar Extender Dilemma

I had a issue whereby my ajax calendar extender pop up seemed to have a transparent background and the dates were difficult to read. They appeared to be overlapped by another element on the page. I've read many posts about the ajax calendar extender being buggy and a few discussing z-index; none provided me with enough detail to fix my problem.

People are quick to call things buggy if they're not really sure what is causing a problem, so I dimissed this to begin with and concentated on learning about the CSS z-index property, which incidentally, DID, fix my display problem with the ajax calendar extender.

I have provided you with some code to clear things up.

Sample HTML and CSS

Copy the following html and css from <html> to </html> and paste it into a notepad file then save as default.htm (or a name of your choice). Double-click this file to run and click on the top plus sign(+) to show pop up. Play around with the z-index ordering in the CSS script section of this code and re-run to see different effects.

<html> <head> <title>CSS Positioning and z-index Sample by Mark Graham</title> <style type="text/css"> .clr{ clear:both; } label { display:block; } .clickable { cursor:hand; } #div1, #div2, #div3 { height:40px;border-top:1px solid #ccc;visibility:visible; } #pop1, #pop2, #pop3 { float:left;background:#ffef9f;border:1px solid #333;padding:60px;visibility:hidden; left:0;top:0; } /* --- Here are the positioning and z-index properties. Play around with these values --- */ #div1, #div2, #div3 { position:relative; } #pop1, #pop2, #pop3 { position:absolute; z-index:2; } #div2 { z-index:1; } </style> </head> <body> <h1>Sample by Mark Graham (<a href="http://designcodetest.blogspot.com/" title"Design, Code, Test blogging by Mark Graham">designcodetest</a>)</h1> <div id="div1"> <span id="sp1" class="clickable">+</div> <div id="pop1"> <label>DateFrom:</label> <input id="txtDateFrom1" name="txtDateFrom1" /> <label>DateTo:</label> <input id="txtDateTo1" name="txtDateTo1" /> </div> </div> <div id="div2"> <span id="sp2">+</span> <div id="pop2"> <label>DateFrom:</label> <input id="txtDateFrom2" name="txtDateFrom2" /> <label>DateTo:</label> <input id="txtDateTo2" name="txtDateTo2" /> </div> </div> <div id="div3"> <span id="sp3">+</span> <div id="pop3"> <label>DateFrom:</label> <input id="txtDateFrom3" name="txtDateFrom3" /> <label>DateTo:</label> <input id="txtDateTo3" name="txtDateTo3" /> </div> </div> <script type="text/javascript"> window.onload = function() { document.getElementById("sp1").onclick = clicked; } function clicked() { document.getElementById("pop1").style.visibility = 'visible'; } </script> </body> </html>
Posted by Mark Graham (MCP) at 02:11
Labels: , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

My Posts Go Here

Asp.Net Tips

Global.asax File Error Logging
Deep Copy Data Caching in Asp.Net
Avoiding Redirects

C#

A C# String Parsing Class; No Regular Expressions

CSS Tips

Using z-index
Consistent/Equal Height Columns in CSS

Design Patterns

Registry Pattern

Google Ads

SQL & Database Tips

Accurate DATETIME Range Searching in SQL Server
Extract Substring Using SQL
Saving Object State

.Net Config

.Net Config Resources