html cssでのはみ出し画像表示方法

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTMLとCSSを使って下記ページを模写している初心者です。

http://pas-pol.jp/

発生している問題・エラーメッセージ

ページ下部のSHERE ON TWITTERボタンの上にある　△のバックトップボタンの実装がうまくできません。
背景白の画像でグレー部分とホワイト部分の間に画像を表示させていると思うのですが、その表示がうまくできません。

試したこと

position:absolute;を使いましたが
bottom:0;だと△画像の下部から0,bottom:-1;だと△画像の上部から-1と表示され、
うまく白背景とグレー背景の真ん中に表示することができません。

Comments

[m.ts10806]

「初心者アイコン」をご利用ください。

[Lhankor_Mhy]

『模写』のルールがよくわからないのですが、開発者ツールを使ってCSSをコピペするのはルール違反なのですか？

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

【前提】
まず、模写したいのであれば、デベロッパーツールを利用しましょう。google chromeであれば、F12を押すとツールが開きます。
ツールの左上にあるマークをクリックし、そのままページ内の見たい要素をクリックすると、その要素に当たっているcssが確認できます。

分からないプロパティがあれば、都度検索し、学んでいってください。

---

【蛇足】
そのページですと画像が使われいますが、自分なら画像を使わずにcssのみで実現させます。
こちらも参考にしてみてください。

サンプル
https://jsfiddle.net/sh3La4fw/

Comments

[kii.32]

す、すごいです！ありがとうございます！大変参考になりました！！