[CSS小ネタ] プロフィール画像に編集ボタンを重ねる

## やりたいこと
![Screen Shot 2022-06-26 at 12.59.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/17343499-bc5c-8e97-7a04-e0d59e0d6bb3.png)
よくある、こういうヤツ。

## 手順

- 箱を作って画像とボタンを置く
- 綺麗に配置する (flex)
- 画像にボタンを重ねる (position)
- はみ出た分を消す (overflow)

画像を丸くすると、ボタンが良い感じに置けなくなるので、箱を丸くする方針。

### 箱を作って画像とボタンを置く

![Screen Shot 2022-06-26 at 13.07.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/598a0af4-6b5d-a716-671f-bc9ca6f6311f.png)

```html
<div class="iconContainer">
  <img src="./kura.png" alt="" width="120px" height="120px" />
  <button>edit</button>
</div>
```

```css
.iconContainer img {
  border: 1px solid #00000050;
}
```
画像の大きさは 120px x 120px で固定とし、分かりやすいように、ほんのり枠線をつけた。html はもう変えないので、以降 CSS のみ。

### 綺麗に配置する

![Screen Shot 2022-06-26 at 13.11.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/504f27e1-ad0b-04a3-d1bf-118482cdb33d.png)

```css
.iconContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.iconContainer img {
  border: 1px solid #00000050;
}
.iconContainer button {
  width: 100%;
  background-color: #00000095;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  padding: 2px 0;
}
```

縦に並べて、ボタンをフラットにした。

### 画像にボタンを重ねる

![Screen Shot 2022-06-26 at 13.15.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/8886255e-4060-621a-ee6d-6bd1a7292ae9.png)

ボタン分縦に伸びたので、このままではまんまるにならないので、箱にサイズを与えて、作業しやすいように赤い Border をつけた。念の為画像にも同じサイズをつけておいた。

```css
.iconContainer {
  ...
  border: 1px solid red;
  width: 120px;
  height: 120px;
}
.iconContainer img {
  ...
  width: 120px;
  height: 120px;
}
.iconContainer button {...}
```

![Screen Shot 2022-06-26 at 13.25.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/94b1b71f-4e60-ff6d-5d82-7993ea434cdc.png)


```css
.iconContainer {
  ...
  border-radius: 15px;
}
.iconContainer img {
  ...
  position: relative;
  top: 10px;
}
.iconContainer button {
  ...
  position: relative;
  bottom: 10px;
}
```

画像を下に、ボタンを上にずらした。はみ出る部分が分かりやすいように箱の Border をちょっと丸くした。

### はみ出た部分を消す

![Screen Shot 2022-06-26 at 13.32.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/eed26378-4f9a-0e65-5e20-e5ef891ea633.png)

```css
.iconContainer {
  ...
  border: 1px solid #00000095;
  ...
  overflow: hidden;
}
```
赤い Border を黒くして、overflow を hidden としてはみ出た部分を消した。

## 完成

![Screen Shot 2022-06-26 at 13.37.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/ba5770df-701a-c657-0266-7729b5dc175a.png)

あとは、border-radius の値を調整すれば、だいたいどんな形でも行ける。before, after を使って形をつくるもの（スーパー楕円とか）は、この方法だとうまく行かない。

まんまるの場合のコード

```html
<div class="iconContainer">
  <img src="./kura.png" alt="" width="120px" height="120px" />
  <button>edit</button>
</div>
```

```css
.iconContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid #00000095;
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  overflow: hidden;
}
.iconContainer img {
  border: 1px solid #00000050;
  width: 120px;
  height: 120px;
  position: relative;
  top: 10px;
}
.iconContainer button {
  width: 100%;
  background-color: #00000095;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  padding: 2px 0;
  position: relative;
  bottom: 10px;
}
```

作ってみれば、たいした内容でもなかったが、勉強用素材として良さそうな気がした。

おしまい。