Z-index:
Adding
z-index:
The first example, Stacking without z-index, explains how stacking is arranged by default. If you want
to specify a different stacking order, you have to position an element and use
the z-index property.
This property is assigned with an
integer value (positive or negative), which represents the position of the
element along the z-axis. If you are not familiar with the z-axis, imagine the
page has several layers one above the other. Each layer is numbered. A layer
with a greater number is rendered above layers with smaller numbers.
Warning! z-index only has an effect if an element is positioned.
- bottom: furthest from the observer
- ...
- Layer -3
- Layer -2
- Layer -1
- Layer 0 default rendering layer
- Layer 1
- Layer 2
- Layer 3
- ...
- top: closest to the observer
Notes:
- When no z-index property is specified, elements are
rendered on the default rendering layer 0 (zero).
- If several elements share the same z-index value (i.e.
they are placed on the same layer), stacking rules explained in the
section Stacking without z-index
apply.
In the next example, the layers'
stacking order is rearranged using z-index. The z-index of DIV#5 has no effect
since it is not a positioned element.
Example
source code
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style
type="text/css">
div
{
opacity: 0.7;
font: 12px Arial;
}
span.bold
{ font-weight: bold; }
#normdiv
{
z-index: 8;
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1
{
z-index: 3;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2
{
z-index: 2;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1
{
z-index: 5;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2
{
z-index: 1;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
</style></head>
<body>
<br
/><br />
<div
id="absdiv1">
<br /><span
class="bold">DIV #1</span>
<br />position: absolute;
<br />z-index: 5;
</div>
<div
id="reldiv1">
<br /><span
class="bold">DIV #2</span>
<br />position: relative;
<br />z-index: 3;
</div>
<div
id="reldiv2">
<br /><span
class="bold">DIV #3</span>
<br />position: relative;
<br />z-index: 2;
</div>
<div
id="absdiv2">
<br /><span
class="bold">DIV #4</span>
<br />position: absolute;
<br />z-index: 1;
</div>
<div
id="normdiv">
<br /><span
class="bold">DIV #5</span>
<br />no positioning
<br />z-index: 8;
</div>
</body></html>
See
also
- Stacking without z-index : Default stacking rules
- Stacking and float : How floating elements are handled
- The stacking context : Notes on the stacking context
- Stacking context example 1 : 2-level HTML hierarchy, z-index on the last
level
- Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
- Stacking context example 3 : 3-level HTML hierarchy, z-index on the second
level
Overlay issue:
Close button wont work Some time’s :
We need to change the javascript:parent.close() method to
javascript:close();
Then it wont take parent object and it will close.
Print Button
Implementation:
1. Take div
for header and footer and content and for css also(what ever u want to print)
and give id for the div’s.
2. Call the
javascript method or Jquery method on keydown event for print, here we need to
capture the ctrl+p event also using event key (if Required)
jQuery(document).keydown(function(event) {
//alert('ctrl+p');
if(event.ctrlKey
&& event.keyCode == 80) {
console.log("Hey! Ctrl+P event
captured!");
event.preventDefault();
event.returnValue=false;
printCorePage();
}
});
3. First
apply for css and apply for header and apply for content and apply for
Footer.(content)
4. Using,
document.getElementById(“idname”).innerHTML = content
5. If any
content is not required then block the content.
Using, document.getElementById("printmenu").style.display
= "none";
UI Tips:
Importing java file into jsp:
<%@page
import="com.uboc.banking.bo.UserControl"%>
-------------------------------------------------------------------------
Importing tag-lib into jsp:
<%@ taglib uri="/WEB-INF/struts-tiles.tld"
prefix="tiles" %>
-------------------------------------------------------------------------
Prototype.js error :
Add jquery conflict code in jquery
$.noConflict();
($ depends upon jquery symbol)
-------------------------------------------------------------------------
Object expected: Script error
Import is missing for that variable, So import the required
class
-----------------------------------------------------------------------
Object extected : Script error
Some time need to import the core matric's lib
---------------------------------------------------------------------------
To restrict the Hyperlinks in a page Code:
var div =
document.getElementById("printableContentBlock");
var anchorList = div.getElementsByTagName('a');
for(var
i = 0; i < anchorList.length; i++) {
anchorList[i].disabled
= true;
anchorList[i].onclick
= '';
anchorList[i].removeAttribute('href');
}
window.print();
window.close();
}
----------------------------------------------------------------------------
Object expected: script error in IE
ex: firstusageconfirmpayment.do
Solution: need to import the function implementation file
Ex: Tip is not defiend in FF
Solution: Need to import the below js file :
<script language="JavaScript"
src="/js/wz_tooltip<%=cacheVersion%>.js"></script>
----------------------------------------------------------------------------
Script Error: "actualTitle" is null in FF
Object expected: script error in IE
1. Check the title of landing Page
2. And change the Title div id
----------------------------------------------------------------------------
