Tenho a seguinte estrutura HTML:
<div class="container"></div>
<div class="card encontreundiade">
<div class="card-body p-3">
<form id="formcontato" class="p-0">
<div class="form-group mb-2">
<label for="estado" class="mb-0">Estado</label>
<label for="selectestado"></label>
<select class="form-control " id="selectestado" name="estado">
<option>Carregando...</option>
</select>
</div>
<div class="form-group mb-1" id="selecionarcidadediv">
<label for="cidade" class="mb-0">Cidade</label>
<label for="selectcidade"></label>
<select class="form-control" id="selectcidade" name="cidade">
</select>
</div>
</form>
<div id="listaunidades">
<ul class="list-unstyled pt-1">
</ul>
</div>
</div>
</div>
<div id="gmap" style="width:100%;height:75vh;">
</div>
Porem eu editei o css de forma com que a div encontreundiade ficasse flutuando sobre a div gmap, e funciona perfeitamente, o problema é que no responsivo, não estou conseguindo voltar, fica flutuando tambem.
CSS no pc:
.encontreundiade{
width: 300px;
position: absolute;
z-index: 1;
margin-top: 1rem;
margin-left: 1rem;
/*background: url("../imgs/fundo.png") left 50px no-repeat;*/
box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
max-height: 70vh;
}
CSS mobile:
@media only screen and (max-width: 768px) {
.encontreundiade{
width: 100px;
position: static;
z-index: 0;
margin-top: 0;
margin-left: 0;
box-shadow: 0 0 0 0;
}
}
Qualquer opção que eu coloquei no position não surge qualquer efeito, porem quando mudo por exemplo a cor do background funciona, então problema com seletor não é.