前提・実現したいこと
cssで以下の画像のように、子要素を親要素からはみ出して見えるようにしたいです。
GitHubでは、マークダウンのプレビューで、hタグにカーソルを合わせると、アンカーアイコンが表示されます。
画像は、そのアンカーアイコンが常時変更されるように、Chromeのデベロッパツールで visibility: visible;
とcssを書き換え、アンカーアイコンが常時表示されるようにしたものです。
デベロッパツールで、確認したところ、
html
1<article> 2 <h1> 3 <a id="user-content-見出しの名前" class="anchor"> 4 <svg class="octicon octicon-link"> 5 <!-- リンクのアイコン --> 6 </svg> 7 </a> 8 </h1> 9</article>
このような構造になっていることがわかりました。
ここで説明のため、articleタグに対して、 padding: 0px;
としています。
すると、aタグの中のsvgが、親であるarticleから左にはみ出して表示されています。
h1タグの見出しの文字、この例でいう "h1見出し" という文字列が、article内に対して左寄せで整って配置されているのに対し、リンクアイコンがそれよりも左側に表示されるため、h1タグの中身の左端の位置を動かさなくてもよいという状況になっています。
これと同じような配置が私のやりたいことです。
試したこととその結果
GitHubのソースを参考にして、自分でも実装してみました。
ポイントとしては、
margin-left: 負の値 (ネガティブマージン)
であると考えました。その結果を次の画像に示します。
"h2見出し"の部分を見てわかるように、リンクアイコンが、articleのpaddingで設定した左端の部分と重なったところ、半分隠れてしまいました。
GitHubでは重なっていた部分が上に表示される、場合によってはarticleよりも左側にはみ出して表示される、という挙動になっていました。
これは私が希望している挙動と異なります。
教えていただきたいこと
GitHubで、なぜ、最初の画像のような挙動になるのかという説明と、可能であれば、その挙動を再現するコード。
また、「どのようなキーワードでググればいいのか」ということでも結構ですので、解決策・解決に導くような方法を教えていただきたいです。
補足情報
使用しているブラウザは、macOS版のGoogle Chrome 69.0.3497.100です。
追記 2018/10/17 14:20
ページ全体をここに置きました。
CodePen
回答2件
あなたの回答
tips
プレビュー