人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

スキンデザインにおける 「position:relative」と「position:absolute」

2016年 01月 21日
前稿でスキンを再編した過程で、「display: table」「display:table-cell」を使用した個所について整理しました。

本稿は、「position:relative」と「position:absolute」の使用箇所について整理します。 いずれも、ブロックを始めとする表示要素の配置に、要所で活躍しているCSS記述です。



下図は、それらが記述された部分をページ構成の模式図上で表したものです。
スキンデザインにおける 「position:relative」と「position:absolute」_b0174191_19051875.png
以下で、各所の説明をします。

〔ボタン型ページャーの上部配置〕
(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) 深層モード総集編」等を参照ください。




by Ataron | 2016-01-21 23:28 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。