How to place a div on top of another div in a table layout?
I have a layout that looks like this:
It's a table with one cell a开发者_运维技巧t the top and three cells below. The three cells are 150px, auto, 200px.
Inside the middle cell I have a div containing a calendar. I want to be able to put another div with some opacity on top of this one, in order to "blur" it and make it unusable as I process an Ajax request.
I've tried styling the opacity-div with
position: absolute;
margin-left:150px;
margin-right:200px;
width:100%
But turned out that width 100% was 100% of the entire screen, not just that cell.
I've tried putting the div underneath the calendar div in the code and styling it with:
position: relative;
top: -100%;
height: auto;
But this doesn't seem to work at all since I have no way of knowing how tall the calendar will be, so I can't determine height and how much I should move it up.
You'd need to put a container div inside the blurrable cell, surrounding the cell's contents.
<tr>
<td>...</td>
<td>
<div style="position: relative">
<div id="calendar">...</div>
<div id="blur"></div>
</div></td>
etc...
This way you guarantee that the absolute positioning will be done relative to this container div, and not whatever element farther up the tree is relative (which could very well be the <body> or <html>).
加载中,请稍侯......
精彩评论