3

Tenho uma div container com height e width 90%, está do jeito que quero! Mesmo se eu diminui o zoom ele permanece fixo sem aumentar ou diminuir. O que estou tentando fazer é uma div sobrepor essa div container e fique fixa realmente. Mesmo aumentando e diminuindo o zoom a div que tem que sobrepor o container fique fixa. Vou dar um exemplo.

Tamanho zoom normal:

inserir a descrição da imagem aqui

Tamanho zoom reduzido: inserir a descrição da imagem aqui

Eu gostaria de deixar a div que sobrepõe a imagem fixa mesmo reduzindo o zoom.

HTML

<div id="container">
    <div class="corpo">       
       <img src="img/1inicio.jpg" style="height:100%;" />
       <div class="painelvermelho"></div>
    </div>
</div>

CSS

#container {
    position:relative;
    height:90%;
    width:90%;
    margin: 0 auto;
    border: 1px red solid;
}
.corpo img {
    position: absolute;
    width:100%;
}
.corpo {
    min-height: 500px;
    height:100%;
}
.painelvermelho {
    width: 130px;
    height: 100px;
    border: 5px solid #FF0000;
    position: absolute;
    cursor: pointer;
    bottom:0;
}
1
  • Eu entendi bem? Você quer fazer um click bait colocando um pop up sobre o botão iniciar do Windows? KKKKKKKKKK 18/03/2020 às 7:08

3 Respostas 3

1

Não entendi direito, se puder especificar melhor o que você precisa, abaixo segue um exemplo da div fixa:

body, html {
            height:100%;
        }


        #container {
            position:relative;
            height:90%;
            width:90%;
            margin: 0 auto;
            border: 1px blue solid;
        }
        .corpo img {
            position: absolute;
            width:100%;
        }
        .corpo{
            height:100%;
        }
        .painelvermelho{
            width: 20%;
            height: 20%;
            border: 5px solid #FF0000;
            position: fixed;
            cursor: pointer;
            bottom:8%;
        }
   <div id="container">
        <div class="corpo">
            <img src="img/1inicio.jpg" style="height:100%;" />
            <div class="painelvermelho"></div>
        </div>
    </div>

0

#fixada{position:fixed; background:black; height:40px; width:100%; bottom:0px;}
#botao{position:absolute; width:40px; height:40px; background:red; left:0;}
<div id="fixada">
<div id="botao">
</div>
</div>

Olá amigo se eu entendi direito você quer o efeito da barra do Windows certo? Se for isso tente montar assim, dentro de sua div fixa, acrescente sua outra div com position:absolute e left:0; Segue um exemplo:

0

Olá, boa noite!

Um dos métodos que você pode adotar para que a div que sobrepõe a imagem permaneça fixa independente do zoom na imagem, usando como ferramenta somente HTML e CSS, é não atribuir valores para os campos width e height. Ao invés disso, você pode atribuir um espaçamento interno com valores proporcionais (padding utilizando porcentagem, por exemplo).

Abaixo segue o exemplo de como ficaria uma possível resolução:

#container {
    position:relative;
    height:90%;
    width:90%;
    margin: 0 auto;
    border: 1px red solid;
}
.corpo img {
    position: absolute;
    width:100%;
}
.corpo {
    min-height: 500px;
    height:100%;
}
.painelvermelho {
    
    /* width: 130px;
    height: 100px;
    */ border: 5px solid #FF0000;
    position: absolute;
    cursor: pointer;
    bottom:0; 
    padding: 15%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="estilo.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <div class="corpo">       
           <img src="img/1inicio.jpg" style="height:100%;" />
           <div class="painelvermelho"></div>
        </div>
    </div>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .