position:absoluteで前面に配置した要素のサイズをposition:relativeとなっている親要素にあわせて相対指定するテクニックをご紹介します。
実例でいうと、たとえばこんな感じ。
リキッドレイアウトの要素へグラデーションの縁をつけてみました。
absolute要素の幅を指定せず、left,rightを両方とも指定するとrelative要素に合わせた相対値の幅になり
absolute要素の高さを指定せず、top,bottomを両方とも指定するとrelative要素に合わせた相対値の高さになります。
ソースはこちら
<br /> <div id="sampleBorder"></div><br />
<br />
#sampleBorder {<br />
position: relative;<br />
display: block;<br />
margin: 24px auto;<br />
padding: 1em;<br />
width: 80%;<br />
background: #666666;<br />
background: -moz-linear-gradient(top, #666666 0%, #0e0e0e 100%);<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#0e0e0e));<br />
background: -webkit-linear-gradient(top, #666666 0%,#0e0e0e 100%);<br />
background: -o-linear-gradient(top, #666666 0%,#0e0e0e 100%);<br />
background: -ms-linear-gradient(top, #666666 0%,#0e0e0e 100%);<br />
background: linear-gradient(to bottom, #666666 0%,#0e0e0e 100%);<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#0e0e0e',GradientType=0 );<br />
border-radius: 6px;<br />
}<br />
#sampleBorder:before {<br />
content: '';<br />
position: absolute;<br />
top: 3px;<br />
left: 3px;<br />
right: 3px;<br />
bottom: 3px;<br />
z-index: 1;<br />
display: block;<br />
background: #222;<br />
border-radius: 3px;<br />
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.1);<br />
}<br />
topとbottom、leftとrightが対になっているので
こんな使い方もできます。
スマートフォン画面の回転に対応したリキッドデザインの3等分タブ
リキッドレイアウトで三分割したタブを絶対位置指定で配置しています。
A
Aの内容です。
B
Bの内容です。
C
Cの内容です。
<br /> <div id="sampleArea"><br /> <div id="sampleA" class="sampleContent current"><br /> <h2>A</h2><br /> <div>Aの内容です。</div><br /> </div><br /> <div id="sampleB" class="sampleContent"><br /> <h2>B</h2><br /> <div>Bの内容です。</div><br /> </div><br /> <div id="sampleC" class="sampleContent"><br /> <h2>C</h2><br /> <div>Cの内容です。</div><br /> </div><br /> </div><br />
<br />
#sampleArea {<br />
position: relative;<br />
border: 1px solid #ccc;<br />
}<br />
.sampleContent h2 {<br />
position: absolute;<br />
top: 0;<br />
display: block;<br />
height: 30px;<br />
line-height: 30px;<br />
text-align: center;<br />
margin: 0;<br />
cursor: pointer;<br />
}<br />
.sampleContent h2:hover {<br />
top: -6px;<br />
height: 36px;<br />
line-height: 36px;<br />
}<br />
.sampleContent div {<br />
margin-top: 30px;<br />
padding: 12px;<br />
display: none;<br />
}<br />
.sampleContent.current div {<br />
display: block;<br />
}<br />
#sampleA h2,<br />
#sampleA div {<br />
background: #458C6B;<br />
color: #fff;<br />
}<br />
#sampleA h2 {<br />
left: 0;<br />
width: 33.3%;<br />
}<br />
#sampleB h2,<br />
#sampleB div {<br />
background: #D9A86C;<br />
color: #fff;<br />
}<br />
#sampleB h2 {<br />
left: 33.3%;<br />
right: 33.3%;<br />
}<br />
#sampleC h2,<br />
#sampleC div {<br />
background: #A62424;<br />
color: #fff;<br />
}<br />
#sampleC h2 {<br />
right: 0;<br />
width: 33.3%;<br />
}<br />
<br />
$(function(){<br />
$('.sampleContent h2').on('click',function(){<br />
$('.sampleContent').removeClass('current');<br />
$(this).parent().addClass('current');<br />
});<br />
});<br />