前稿でスキンを再編した過程で、「display: table」「display:table-cell」を使用した個所について整理しました。
本稿は、「position:relative」と「position:absolute」の使用箇所について整理します。 いずれも、ブロックを始めとする表示要素の配置に、要所で活躍しているCSS記述です。
+
下図は、それらが記述された部分をページ構成の模式図上で表したものです。
以下で、各所の説明をします。
〔ボタン型ページャーの上部配置〕(5)CONTENTSのブロック内で、本来は(7)POSTの直下に表示される(16)pagerNavLink(ボタン型ページャー)を、上方に飛ばして配置する。
この部分の簡略なHtml
<div id="CONTENTS">
<div class="MpageTool"> --- </div>
<div class="POST"> --- </div>
<div class="pagerNavLink"> --- </div>
<div class="MpageTool"> --- </div>
</div>
関連するCSS記述
#CONTENTS {
display: table-cell;
overflow: hidden;
padding: 0px 40px 50px;
position: relative;
vertical-align: top; }
.pagerNavLink {
font-family: inherit !important;
font-size: 16px !important;
white-space: nowrap;
position: absolute;
top: 0px;
width: 100%;
margin: 30px -40px 20px !important; }
親ブロック(5)に「
position:relative;」を指定し、子ブロック(16)に「
position:absolute;」を指定すると、親ブロックの基準位置に対して固定した配置を実現出来ます。 ここでは、「
top: 0px;」を指定して(5)の最上端に接した配置を指定しています。
すなわち、本来は投稿文の下のボタン型ページャーを、投稿文の上側に配置させたのです。 (16)pagerNavLink は宙に浮いた状態で、自分の位置によって他の(7)POST等の配置を排斥することがありません。 配置位置は「
top:」の値や「
margin」の上マージン値で調整できます。
〔投稿文タイトル部と編集|削除スイッチ〕
(8)POST_HEAD(投稿文タイトル枠)ブロックは、タイトル文字を配置する(9)POST_TTL と「編集|削除」スイッチの(10)POST_ADM の2個のブロックを内包しています。 「編集|削除」スイッチの配置を、タイトル文字の流入と無関係にしながら、タイトル枠内に固定するために「position:」の指定をしています。
関連する Html 抜粋です。
<div class="POST_HEAD">
<div class="POST_TTL"><h2><$postsubject$></h2></div>
<div class="POST_ADM"><$postadmin type=2$></div>
</div>
関連するCSSです。
.POST_HEAD {
position: relative;
margin: 25px 0px 20px;
background: #d7e3ec;
box-shadow: 4px 4px 6px #aaa;
overflow: hidden; }
.POST_TTL {
font-size: medium;
font-weight: normal;
padding: 0.44em 0em 0.22em 1.5em; }
.POST_ADM {
position: absolute;
top: 0px;
right: 0px;
font-size: medium;
font-weight: normal;
padding: 0.38em 1em 0em; }
親ブロック (8)POST_HEAD の右上端の位置を基準位置として、これに子ブロック (10)POST_ADM の右上端を重ねて配置してます。「
top: 0px;」「
right: 0px;」はその指定です。 (10)POST_ADM は宙に浮き、下にタイトル文字が流れ込んでも、互いに干渉しません。
タイトル部デザインの詳細は、過去記事「
「Edit Del」スイッチのデザイン 最後の纏め」を参照ください。
〔メニュー部の迫出しと影のマスク〕右メニューの迫出しは「hover:」に「position:relative;」を指定することで実現しています。 本来の hover は要素の元位置は変化しませんが、敢えて違う位置に hover を表示させ、迫出した様に見せます。
関連する簡略なHtml部分です。
<div class="MN">
<div class="MN_L">
<div class="MNTRAY"> --- </div> /* 1個目のメニュー */
<div class="MNSPACER"></div> /* 1個目のメニュー */
<div class="MNTRAY"> --- </div> /* 2個目のメニュー */
<div class="MNSPACER"></div> /* 2個目のメニュー */
</div>
<div class="MN_R"></div>
</div>
実際のHtmlは、メニューの数だけ、コメントした2行が繰返して配置されます。
これに関連するCSSです。
.MNTRAY:hover {
width: 240px;
position: relative;
right: 90px;
border-radius: 4px 0px 0px 4px;
margin-right: -90px; }
.MNSPACER {
width: 170px;
height: 8px;
background: #b8dcef;
position: relative; }
.MN_R {
display: table-cell;
width: 10px;
background: #b8dcef;
position: relative; }
(23)MNTRAY が迫出すブロックです。
「hover」時は幅が240pxに増し(+90px)、基準位置の右端は元から右へ90pxの場所になります。そこから左に90pxズラして初めて、右端は元の位置となり、左に90px迫出します。 その配置指定が「
right: 90px;」です。
「hover」時の表示は宙に浮いていますが、周囲に占める場所は「relative」の指定が無い時の場所です。 つまり、幅240pxとなった「hover」時は、右の要素を右へ90px排斥します。 それを元に戻すのが「
margin-right: -90px;」で、この指定がないと右側の(27)MN_R が追いやられてマスクできなくなります。
(26)MNSPACER と (27)MN_R に「
position: relative;」が指定されているのは、対象要素の上に浮いた表示をさせ、マスクとして機能させるためです。
詳細は過去記事「
せりだすメニュー こだわりの影」を参照ください。
+
他に一箇所、(17)MpageTool の中でも「position: relative;」を使っています。 MpageTool は最初からある「ページ送りスイッチ」ですが、「次のページ」「前のページ」の内容を表示する文字列が、他のスイッチに隠れない様に指定したものです。 冗長になりますので、これらのスイッチデザインは過去記事「
Exブログ ページャー変更に対処する (5) 深層モード総集編」等を参照ください。