Div on DIV fixed

0

I have div container with height and width 90% , it's the way I want! Even if I zoom out it stays fixed without increasing or decreasing. What I'm trying to do is div override this div container and stay fixed really. Even increasing and decreasing the% w / o% that has to overlap the div is fixed. I'll give you an example.

Normal zoom size:

Zoomedinsize:

Iwouldliketoleavethe%costhatoverlaysthestillimageevenbyzooming.

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;
}
    
asked by anonymous 11.12.2016 / 21:49

2 answers

0

I did not understand right, if you can specify what you need best, here's an example of the 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>
    
13.12.2016 / 01:11
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 get it right you want the effect of the Windows bar right? If so, try to put it like this, inside your fixed div, add your other div with position: absolute and left: 0; Here is an example:

    
13.12.2016 / 13:11