Skip to content

Instantly share code, notes, and snippets.

@jnareb

jnareb/gist:912389

Created April 10, 2011 14:37
Show Gist options
  • Save jnareb/912389 to your computer and use it in GitHub Desktop.
Save jnareb/912389 to your computer and use it in GitHub Desktop.
Download ZIP
Absolutely positioned block element inside relatively positioned inline (or inline-block) element
Raw
gistfile1.html
<html>
<head>
<title>
Absolutely positioned block element
inside relatively positioned inline (or inline-block) element
</title>
<style>
div {
border: 1px dotted #a0a0a0;
}
span {
border: 1px dashed #808080;
}
.marker {
background-color: #f0fff0;
position: relative;
/* display: inline-block; */
}
.container {
border: 2px solid black;
padding-left: 1ex;
padding-right: 1ex;
background-color: #f0f0ff;
position: absolute;
width: 15ex;
}
</style>
</head>
<body>
<table border="1" width="80%" align="center">
<col width="50%"><col width="50%">
<tr>
<td>
&nbsp;<br>
aaa aaa aaa&nbsp;
<span class="marker">b bbbbbb bbbbbb bbbbbb b&nbsp;
<div class="container" style="top: 0; left: 0">
<b>absolute</b> (tl)<br>after br
</div>
</span>
ccc ccc ccc&nbsp;
&nbsp;<br>
&nbsp;<br>
</td>
<td>
&nbsp;<br>
aaa aaa aaa&nbsp;
<span class="marker">b bbbbbb bbbbbb bbbbbb b&nbsp;
<div class="container" style="top: 0; right: 0">
<b>absolute</b> (tr)<br>after br
</div>
</span>
ccc ccc ccc&nbsp;
&nbsp;<br>
&nbsp;<br>
</td>
</tr>
<!-- ...................................................................... -->
<tr>
<td>
&nbsp;<br>
aaa aaa aaa&nbsp;
<span class="marker">b bbbbbb bbbbbb bbbbbb b&nbsp;
<div class="container" style="bottom: 0; left: 0">
<b>absolute</b> (bl)<br>after br
</div>
</span>
ccc ccc ccc&nbsp;
&nbsp;<br>
&nbsp;<br>
</td>
<td>
&nbsp;<br>
aaa aaa aaa&nbsp;
<span class="marker">b bbbbbb bbbbbb bbbbbb b&nbsp;
<div class="container" style="bottom: 0; right: 0">
<b>absolute</b> (br)<br>after br
</div>
</span>
ccc ccc ccc&nbsp;
&nbsp;<br>
&nbsp;<br>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment