posicionamento div canto superior direito

rafa-martin · Julho 27, 2021

Pessoal, boa tarde. Estou fazendo uma barra de alerta de cookies. Não estou conseguindo colocar o botão de fechar no canto superior direito. Alguém, pode me dar uma luz? Segue código.

const localPref = JSON.parse(window.localStorage.getItem('cookies-pref'));
if (localPref) activateFunctions(localPref);

function getFormPref() {
return [...document.querySelectorAll('[data-function]')]
.filter((el) => el.checked)
.map((el) => el.getAttribute('data-function'));
}

function activateFunctions(pref) {
pref.forEach((f) => functions[f]());
container.style.display = 'none';
window.localStorage.setItem('cookies-pref', JSON.stringify(pref));
}

function handleSave() {
const pref = getFormPref();
activateFunctions(pref);
}

save.addEventListener('click', handleSave);
}

function marketing() {
console.log('Função de marketing');
}

function analytics() {
console.log('Função de analytics');
}

cookies({
marketing,
analytics,
});
</script>

body {
margin: 0px;
height: 200vh;
background: #eee;
}

.cookies-container {
color: #222;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
position: fixed;
width: 100%;
bottom: 2rem;
z-index: 1000;
}

.cookies-content {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
background: white;
max-width: 720px;
border-radius: 5px;
padding: 1rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 0.5rem;
opacity: 0;
transform: translateY(1rem);
animation: slideUp 0.5s forwards;
}

@keyframes slideUp {
to {
transform: initial;
opacity: initial;
}
}

.cookies-pref label {
margin-right: 1rem;
margin-top: -10px;
}

.cookies-save {
grid-column: 2;
grid-row: 1/3;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: #007cf8;
color: white;
cursor: pointer;
border: none;
border-radius: 5px;
padding: 0.8rem 1rem;
font-size: 1rem;
}

@media (max-width: 500px) {
.cookies-content {
grid-template-columns: 1fr;
}
.cookies-save {
grid-column: 1;
grid-row: 3;
}
}
</style>

<!DOCTYPE html>
<html lang="pt-BR">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookies</title>

</head>

<body>

   <!--
<div class="cookies-container">
<div class="cookies-content">
   <p><font color="black">Nosso site usa cookies para melhorar sua experiência na navegação.</font> <a href="<?php echo asset('..\cookies')?>" target="_blank"><font color="blue"><b>Termos LGPD</b></font></a></p><br>
       <p><font color="black">Baseia-se na orientação do Webec objetivando a Proteção de seus Dados. Lei 13.709/2018 - Lei Geral de Proteção de Dados.</font></p>

<div class="cookies-pref">
</div>
<button class="cookies-save">Salvar e Continuar</button>
</div>
</div>
-->

<div class="cookies-container">

   <div class="cookies-content">



       <p><font color="black">Nosso site usa cookies para melhorar sua experiência na navegação.</font> </p><br>
       <p><font color="black">Baseia-se na orientação do Webec objetivando a Proteção de seus Dados. Lei 13.709/2018 - Lei Geral de Proteção de Dados.</font></p>
       <div class="cookies-pref">

           <button class="cookies-save">OK.Entendi.</button>
           <span><a href="">x</a></span>
       </div>