backgroundからタイトルをはみ出して反映させるには。

Question

前提・実現したいこと

「えんのしたのまつしたさん」のタイトルのように、backgroundからはみ出した表現にするにはどう記述したらよいのか。

　 <section class="top-main-service-wrapper">
      <div class="top-service-menu">
       <p class="top-service-ttl-en">SERVICE</p>   
      </div><!--/.top-service-menu-->
      　<div class="top-main-ttl-1">
          <h2><span class="top-main-ttl-00">
              コンサルティグ</span> 
            <span class="top-main-ttl-01">
                <br>法人向け 
            </span>
      </div><!--/.top-main-ttl-1-->
  </section>

</body>
</html>

ソースコード
/* サービス　横幅 */
.top-main-service-wrapper{
    width: 100%;
    position: relative;
    margin-top: 50px;
}
/* サービス　全体詳細 */
.top-service-menu{
    width: 1086px;
    height: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    background-color: #fff;
}
/* SERVICE フォント */
.top-service-ttl-en{
    right:60px;
    display: flex;
    align-items: center;
    position: absolute;
    letter-spacing: .05em;
    top: 40px;
    font-size: 1.1rem;
    font-weight: 700;
}
/* ─────　横線の配置 */
.top-service-ttl-en::before {
    margin-right: 20px;
    width: 80px;
    content: '';
    display: block;
    height: 1px;
    background-color: #000
}
.top-main-ttl-1{
    position: absolute;
    left: 20px;
    font-size: 50px;
    font-weight: 700;
    
}
.top-main-ttl-00{
    writing-mode: vertical-rl;
    padding: 0 0 200px 0;
    margin-left: 60px;
   
}
.top-main-ttl-01{
    writing-mode: vertical-rl;
    padding: 0 0 400px 0;
    margin-left: 60px;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

ご自身でやってみたこと調べたことは何もないのでしょうか。
https://teratail.com/help/question-tips#questionTips1-2

[rampram0924]

大変失礼いたしました。
ソースコードを貼付いたしました。
position: relative;とposition: absolute;を記述しましたが、適用されず途方に暮れてしまっています。
また、白のbackgroundからはみ出して表示する方法が分かりません。。
もしよろしければ、ご教示いただけますと幸いです。

[dit.]

コードブロックがうまく反映されていません（teratailにはコードを見やすくする機能があります）
以下のような形にしてください。

```html
ここにHTML
```
1行以上開ける
```css
ここにCSS
```

[rampram0924]

ご指摘いただき、有難うございます。
大変助かりました。また、teratail専用の表記に修正いたしました。
「法人向け」「コンサルティング」を縦書きで右から左に、そして白のbackgroundからはみ出して表示させることが出来ず困ってしまっています。
改めて、質問内容を修正いたしました。
もしお時間がありましたら、再度ご確認いただけますと幸いです。
宜しくお願いいたします。

Answer 1

詳細がよくわかりませんが、topを調整されてはいかがですか？

.top-service-ttl-en {
	top: -30px;
}

Comments

[Lhankor_Mhy]

あ、これのことじゃないのか……
「法人向け」「コンサルティング」は、当方の環境では、現状でも白背景の要素（.top-service-menu）からはみ出しています。というか、まったく重なっていません。

[rampram0924]

ご回答いただきまして、ありがとうございます。
アドバイスいただいた「top:-30px」のみで重ねることができ、backgroundからはみ出した表示にすることが出来ました。思えば位置の配置がされていないという初歩的なところで、ハッとさせられました。
本当に助かりました。有難うございます。