Toast Position Picker

<div class="tp-grid">
  <button data-pos="tl">Top L</button><button data-pos="tc">Top</button><button data-pos="tr">Top R</button>
  <button data-pos="bl">Bot L</button><button data-pos="bc">Bottom</button><button data-pos="br">Bot R</button>
</div>
<div class="tp-toast" id="toast">Toast appeared here ✓</div>

body{background:#f6f7fa}
.tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tp-grid button{font:600 13px/1 system-ui,sans-serif;color:#1a1f36;background:#fff;border:1px solid #d8dce6;border-radius:9px;padding:12px;cursor:pointer}
.tp-grid button:hover{border-color:#5b6cff;color:#5b6cff}
.tp-toast{position:fixed;background:#1a1f36;color:#fff;font:600 14px/1 system-ui,sans-serif;padding:13px 18px;border-radius:10px;opacity:0;transition:opacity .3s;pointer-events:none}
.tp-toast.show{opacity:1}
.tp-toast.tl{top:16px;left:16px}.tp-toast.tc{top:16px;left:50%;transform:translateX(-50%)}.tp-toast.tr{top:16px;right:16px}
.tp-toast.bl{bottom:16px;left:16px}.tp-toast.bc{bottom:16px;left:50%;transform:translateX(-50%)}.tp-toast.br{bottom:16px;right:16px}

var toast=document.getElementById('toast'),timer;
document.querySelectorAll('.tp-grid button').forEach(function(b){b.onclick=function(){clearTimeout(timer);toast.className='tp-toast '+b.dataset.pos;void toast.offsetWidth;toast.classList.add('show');timer=setTimeout(function(){toast.classList.remove('show')},1800)}});