# 画面の隅にボタンを配置する方法

**URL:** <https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488>\
**Category:** Development\
**Created:** [2020 年 8 月 30 日午後 7:29 UTC](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488 "2020-08-30T19:29:29Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2020 年 9 月 1 日午後 7:44 UTC](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488/4 "2020-09-01T19:44:59Z")

</div>

> [@verilog15](#):
>
> ご覧の通り、角にボタンを表す小さな丸を追加しました。このボタンは空中に浮かぶようにする必要があります（つまり、スクロールしても…）

お探しの機能は `position: fixed` という CSS プロパティです。CSS の位置指定については、こちらで詳しく読むことができます。

> **[position - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position)**
>
> The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left physical properties and the inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end flow-relative logical properties can...

`position: fixed` を設定すると、要素はビューポートに対して同じ位置に固定され、スクロールしても移動しません。

> [@verilog15](#):
>
> クリック後に実行されるロジックについては、自分で追加してみようと思っていますが、より明確にするために、現在どのようにアラートボックスを開くのかを理解しようとしています。

ここで何を達成しようとしているのかは少し不明確ですが、ボタンをクリックしたときにアラートボックスを表示させたいだけなら、イベントリスナーが必要です。それについては、こちらで詳しく読むことができます。

> **[EventTarget: addEventListener() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)**
>
> The addEventListener() method of the EventTarget interface
> sets up a function that will be called whenever the specified event is delivered to the target.

何か具体的に解決したい問題がありますか？お手伝いできることがあればお知らせください。

---

_[View the full topic](https://meta.discourse.org/t/how-to-put-button-in-the-corner-of-the-screen/162488)._