Div on DIV Fixed

Asked

Viewed 899 times

3

I have a div container with height and width 90%, It’s the way I want it! Even if I zoom out, it stays fixed without zooming in or out. What I’m trying to do is a div superimpose that div container and really stay fixed. Even increasing and decreasing the zoom a div that has to override the container stay fixed. I’ll give you an example.

Normal zoom size:

inserir a descrição da imagem aqui

Reduced zoom size: inserir a descrição da imagem aqui

I’d like to leave the div that superimposes the fixed image even reducing the 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;
}
html css

  • Do I get it right? Do you want to make a Bait click by putting a pop up on the Windows start button? KKKKKKKKKK

3 answers

1

I didn’t understand right, if I can specify better what you need, below follows an example of fixed div:

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

Hello, good night!

One of the methods that you can adopt for the div that superimposes the image remains fixed independent of the zoom on the image, using as a tool only HTML and CSS, is not assign values for the width and height fields. Instead, you can assign an internal spacing with proportional values (padding using percentage, for example).

Below is an example of how a possible resolution would look:

#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>

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>

Hello friend if I got it right you want the effect of Windows bar right? If so, try to mount like this, inside your fixed div, add your other div with position:Bsolute and left:0; Follow an example:

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.