Help us understand the problem. What is going on with this article?

CSSでborderの上に見出しを重ねたボックスを作る

More than 1 year has passed since last update.

sample1.png

<div class="caption_box">
  <h1 class="caption">caption</h1>
  <p>Hello World!, content.....</p>
</div>
.caption_box{
  position: relative;

  margin-top: 1em;
  padding: 1em 2em;
  border: 1px solid black;
}

.caption_box .caption{
  position: absolute;
  top: 0;
  left: 0;

  font-size: 1em;
  padding: 0 1em;
  margin: 0;
  background-color: white;
  transform: translateY(-50%) translateX(1em);
}

解説

親要素にborderposition: relativeを指定します。
子要素にposition: absoluteを指定、配置したい位置に動かします。

左上に配置する場合: top: 0; left: 0;
右上に配置する場合: top: 0; right: 0;

左下に配置する場合: top: 100%; left: 0;
右下に配置する場合: top: 100%; right: 0;

とします。

top: 0; left: 0;と指定するとこうなると思います

sample1_2.png

この時点ではborderに重なりません。
重ねるにはtransform: translateY(-50%)を指定します。

transformで要素を上に自身のheightの半分動かします。

背景色は親要素に合わせます。
合わせないと、

sample7.png
captionがとても目立ちます

配置位置を変えてみる

右上にcaption

sample2.png

transform: translateY(-50%) translateX(-1em);

translateX(-1em)で左に1emずらす

左下にcaption

sample3.png

transform: translateY(-50%) translateX(1em);

translateX(1em)で右に1emずらす

右下にcaption

sample6.png

transform: translateY(-50%) translateX(-1em);

左上に配置 captionにborderをつける

sample4.png

fieldsetタグ と legendタグ を使う

sample5.png

<form>
  <fieldset>
    <legend>寒色と暖色 どちらが好き?</legend>
    <label>寒色<input type="radio" name="q1"></label>
    <label>暖色<input type="radio" name="q1"></label>
  </fieldset>
</form>

CSSは要りませんがform内で使うことを前提としている気がします
form内に作る場合はdivなどよりも fieldsetを使ったほうがいいと思います。


画像と組み合わせる場合

上記の方法はcaption_boxの枠線の上に背景色を合わせたcaptionを配置し、一部枠線を隠して実装していますが、このやり方は画像やグラデーションなどの背景では相性が悪くcaptionが変に目立ってしまいます。

背景に影響されない方法

<div class="caption_box" data-caption="caption">
  画像やグラデーションなどの複雑な背景と一緒に使うことができます
</div>
.caption_box{
  position: relative;

  width: 300px; height: auto;
  margin-top: 0.5em;
  padding: .5em .25em;
  border: 2px solid #000;
  /* 代わりにlinear-gradient()で実装 */
  border-top: none;
  box-sizing: border-box;

  /*  caption用空間を持った枠線を作る calc(captionの左上位置 + captionの幅) */
  background: 
    linear-gradient(to right,
      #000 20px, transparent 20px,
      transparent calc(20px + 6em), #000 calc(20px + 6em)) 0 0 / 100% 2px; 

  background-repeat: no-repeat;
}

/* caption */
.caption_box:before{
  content: attr(data-caption);
  position: absolute;
  top: 0; left: 20px;

  width: 6em; height: auto;

  text-align: center;
  transform: translateY(-50%);
}

sample004.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away