つまりどんな感じのを作るのか

以下のようなものを作る。

書いたコードは以下の感じ。

<div style="color: white;">
<div style="border: #0000FF 5px double; border-radius: 5px; background-color: #3333ff; width: 500px; position: relative; height: 2em;">
ベースとなる何か
<span style="border: #0000AA 3px double; border-radius: 3px; background-color: #5555aa; position: absolute; right: 0px;">ぼたん</span>
</div>
</div>

どうしてこう書いたのか?

考えなければならない点は4つ。

• 外側に以下の2つの記述
  • postion: relative
  • height: 2em;
• 内側に以下の2つの記述
  • position: absolute;
  • right: 0px;

内側の position を absolute にする

内側の span (つまりボタンになる span) を書く。これで配置を絶対配置にする。ただし、外側の要素の poistion を static 以外にしておく必要がある。外側の要素が static ではないなら外側の要素に対して絶対配置になるが、そうでなければページ全体に対する絶対配置となる。とりあえず、 relative が他への影響が最も少ないので relative にしておくのが良い。

内側の right を 0px にする

position が absolute に指定されているため、親要素の右端からの距離が 0px になる。

内側の display は inline (or inline-block) ですか?

position:absolute の場合、インライン要素にしておかないと高さについても設定しなければならず面倒なので注意。

外側の position を relative にする

上述の通り。内側の absolute における位置基準にするために relative にする。

外側の height を適切な数字にする

absolute な要素に対しては合わせて高さを調整してくれない。その為、適切な高さに再設定してやる必要がある。ここでは 2em に設定している。