html - Child div behind parent div, how to fix link? -

-

i'm trying put child <div> (with link in it) behind parent <div>, links doesn't work.

i using z-index: -1, maybe link being drawn "behind" <body>.

is there way achive without breaking link?

thanks

the css

    .front {         width: 200px;         height: 200px;         background: #ea7600;         -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);         -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);         box-shadow: 5px 5px 5px rgba(0,0,0,0.3);     }      .back {         width: 300px; height: 50px; background: #93cdfb;         position: absolute;         left: 100px;         text-align: right;         padding: 5px;     }

the html

<div class="front">  <div class="back">  <a href="http://www.stackoverflow.com">this link works</a>  </div>  </div>   &nbsp;   <div class="front" style="z-index: 1">  <div class="back" style="z-index: -1">  <a href="http://www.stackoverflow.com">this link doesn't work</a>  </div>  </div>

the result

alt text http://img832.imageshack.us/img832/8137/screenshot20100723at105.png

i spent half hour reading (very complex) css specs, i'm little bit confused positioned elements , stacking contexts. however, after fiddling around, found that

body {     position: relative;     z-index: 0; }

actually works! does

body {     position: absolute; }

this turn body element new stocking context, meaning body (not html) serve canvas .back div.


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more