StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POI want a toggling div elemenet, to overlap the underlaying content with z-index. How can I achieve this?
primarykey
Id
749314
data
AcceptedAnswerId
0
AnswerCount
4
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2009-04-14T20:44:47.533
FavoriteCount
0
LastActivityDate
2009-05-09T16:12:43.803
LastEditDate
LastEditorUserId
0
OwnerUserId
38947
ParentId
0
PostTypeId
1
Score
0
ViewCount
1917
LastEditorDisplayName
text
Body
<p>I have a short intro text inside a box, if the user wants to read futrher he can toggle a hidden div element that shows the rest of the content. Under this intro box I have some other element, which I always want to stay in that position. I want the toggled text to 'show above' the fixed content, and I don't want it to push downwards when the toggled div is opened. I've experimented with various z-index values, absolute and relative positioning, to no avail. Is there a clean CSS based solution to this? Please help! Here's a demo of what I'm trying to do:</p> <pre><code>> <!DOCTYPE html PUBLIC "-//W3C//DTD > XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html > xmlns="http://www.w3.org/1999/xhtml" > xml:lang="en"> <head> <style > type="text/css"> .container{width: > 400px; > height: 500px; > border: 1px dashed #999; > } div.container{padding:0; margin:0} #morecontent{ > z-index: 100 > } #morecontent,.introcontent{background: #DFFAFF;} div#fixedcontent{background: > #FFDFDF; > z-index: -1; > position: absolute; > width: 400px > } </style> <title>Toggle overlap - test</title> </head> <body> > <div class="container"> <div id=""> > <script type="text/javascript"> > function toggle(obj){ > var el=document.getElementById('morecontent'); > if (el.style.display !='none'){ > el.style.display='none'; > } > else {el.style.display=''; > } > } > </script> > <p class="introcontent">Lorem ipsum dolor sit amet, consectetur > adipiscing elit. Aenean in pede congue > ipsum sollicitudin pellentesque. Nunc > t tortor dolor, sagittis nec, placerat > vel, commodo sed, nunc. Vivamus > bibendum molestie orci. Duis nec leo > at libero fermentum molestie. Nam eu > risus.<br /> > There's more if you press toggle... > > </p> > <a href="JavaScript: toggle(this)">Toggle</a> > <div id="morecontent" style="display:none;"> > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in > pede congue ipsum sollicitudin > pellentesque. Nunc t tortor dolor, > sagittis nec, placerat vel, commodo > sed, nunc. Vivamus bibendum molestie > orci. Duis nec leo at libero fermentum > molestie. Nam eu risus. > </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. > Aenean in pede congue ipsum > sollicitudin pellentesque. Nunc > t tortor dolor, sagittis nec, placerat > vel, commodo sed, nunc. Vivamus > bibendum molestie orci. Duis nec leo > at libero fermentum molestie. Nam eu > risus. > </p> > </div> > > <div id="fixedcontent"> > <p>This should stay 'under' the toggled content!</p> > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in > pede congue ipsum sollicitudin > pellentesque. Nunc t tortor dolor, > sagittis nec, placerat vel, commodo > sed, nunc. Vivamus bibendum molestie > orci. Duis nec leo at libero fermentum > molestie. Nam eu risus. > </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. > Aenean in pede congue ipsum > sollicitudin pellentesque. Nunc > t tortor dolor, sagittis nec, placerat > vel, commodo sed, nunc. Vivamus > bibendum molestie orci. Duis nec leo > at libero fermentum molestie. Nam eu > risus. > </p> > </div> </div> </div> </body> </html> </code></pre>
Tags
<javascript><css><toggle><z-index>
Title
I want a toggling div elemenet, to overlap the underlaying content with z-index. How can I achieve this?
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USTamas Kalman
plurals
PostLinksPostIdRelatedPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. COPlease clean up and format your source code if you want us to look at it.
  singulars
  PostPostId
  POI want a toggling div elemenet, to overlap the underlaying content with z-index. How can I achieve this?
  UserUserId
  USZack Marrapese
2. COYep - maybe a stripped down version only containing the elements you're having trouble with
  singulars
  PostPostId
  POI want a toggling div elemenet, to overlap the underlaying content with z-index. How can I achieve this?
  UserUserId
  USwheresrhys

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.