StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIs there a way to have element behind a div (links) clickable in areas where the div is "transparent"
primarykey
Id
2749813
data
AcceptedAnswerId
2750009
AnswerCount
3
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2010-05-01T12:02:28.557
FavoriteCount
0
LastActivityDate
2010-05-02T00:38:49.820
LastEditDate
LastEditorUserId
0
OwnerUserId
63104
ParentId
0
PostTypeId
1
Score
0
ViewCount
1284
LastEditorDisplayName
text
Body
<p>I have a block element that is positioned absolutely and some other elements on page that are positioned fixed. The effect is the block on top floats over the page which works well.</p> <p>The links in the elements at the bottom underneath are not clickable. They shouldn't be when the content of the div is over them, but when the "marginal" areas which are transparent are over the links they are visible, but clicks only register to the covering div.</p> <p>The problem only happens when the padding covers the div. But if I just rely on the margin the bottom margin is ignored by browser so the scroll doesn't go high enough up. To solve this I resort to padding at the bottom. This is the problem.</p> <p>Is there a clean way around this? I realize I could have the underneath elements doubled and place on top, but opacity set to 0. That is an undesirable solution however.</p> <p>Sample of the problem:</p> <pre><code><!DOCTYPE html> <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'> <head> <style> #top, #bottom { position: fixed; border: 1 px solid #333; background-color: #eee; left: 100px; padding: 8px; } #top { top: 0; z-index: 1; } #bottom { bottom: 0; z-index: 2; } #contentWrapper { position: absolute; margin: 100px 0 0 0; /* Padding is used to make sure the scroll goes up further on the page */ padding: 0 0 100px 0; width: 600px; z-index: 3; } #content { border: 1 px solid #333; background-color: #eee; height: 1000px; } </style> </head> <body> <div id='top'><a href="#">Top link</a></div> <div id='bottom'><a href="#">Bottom link</a></div> <div id='contentWrapper'> <div id='content'>Some content</div> </div> </body> </html> </code></pre>
Tags
<javascript><html><css>
Title
Is there a way to have element behind a div (links) clickable in areas where the div is "transparent"
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USAdam
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
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. This table or related slice is empty.

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.