0

Estou com um problema creio que bem simples. Porém já fiz de tudo e nada resolve, como podem ver na print a div que está com o hover ela não fica em cima da div pai http://prntscr.com/isgxqp o que eu poderia fazer?

A div info_perfil está com um left:-100px, porém ela não está ficando em cima da div pai e ela está com o z-index: 9999

CSS:

    ul {
       list-style: none;
    }
    ul li {
       position: relative;
       float: left;
    }
    #right {
        float: right;
        box-sizing: border-box;
        padding: 5px 5px;
        width: 220px;
        height: 100%;
        background-color: rgba(255,255,255,0.9);
    }
    #right .usuario_content {
        width: 100%;
        height: 422px;
        overflow: auto;
    }
    #right .usuario_content ul li {
        width: 100%;
        height: 40px;
        border-bottom: 1px dashed rgba(0,0,0,0.4);
    }
    #right .usuario_content ul li:last-child {border: none;}
    #right .usuario_content ul li a {
        position: absolute;
        padding: 0 0 0 40px;
        width: 100%;
        height: 40px;
        text-align: left;
        font-size: 13px;
        box-sizing: border-box;
        z-index: 9;
    }
    #right .usuario_content ul li:hover a {
        background-color: rgba(0,0,0,0.1);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #right .usuario_content ul li ul li .info_perfil {display: none;}
    #right .usuario_content ul li:hover ul li .info_perfil {
        top: -37px;
        left: -110px;
        display: block;
        z-index: 9999;
        width: 250px;
        height: 250px;
        background: #ccc;
    }

HTML:

<div id="right">
<div id="Principal" class="usuario_content" style="display:block;">
   <ul>
      <li id="">
         <img src="fotos/1.jpg" class="avatar align_left" border="0"/>
         <a href="#" id="" class="comecar">Amanda Ferreira</a>
         <span id="" class="status on absolute"></span>
         <strong class="absolute">Aqui vem o status da pessoa legal</strong>
         <ul>
            <li><div class="info_perfil absolute"></div></li>
         </ul>
      </li>
      <li id="">
         <img src="fotos/1.jpg" class="avatar align_left" border="0"/>
         <a href="#" id="" class="comecar">Amanda Ferreira</a>
         <span id="" class="status on absolute"></span>
         <strong class="absolute">Aqui vem o status da pessoa legal</strong>
         <ul>
            <li><div class="info_perfil absolute"></div></li>
         </ul>
      </li>                                                    
   </ul>
</div>
</div>
15
  • Não entendi. Pelo print, a div está acima de tudo.
    – Sam
    Commented 17/03/2018 às 14:34
  • a intenção é tirar ela de dentro da div pai fazer ela estourar, entendeu ? dar um left: -110px
    – goio
    Commented 17/03/2018 às 14:35
  • Entendi não. O que quer dizer "estourar"?
    – Sam
    Commented 17/03/2018 às 14:36
  • que ela pegue um left: -110px que fique acima de todas as div prntscr.com/ish5fc ela ta pegando o left só que ela não estoura a div pai
    – goio
    Commented 17/03/2018 às 14:39
  • Continuo sem entender. Acho até que está faltando código na pergunta. Não tem nem a div #chat e #right. Está incompleta.
    – Sam
    Commented 17/03/2018 às 14:49

2 Respostas 2

3

Olá, Bruno!

Acho que entendi o que você quis dizer, tentei montar o código, espero que seja mais ou menos isso:

Código Completo

ul {
       list-style: none;
    }
    ul li {
        width: 350px;
    }
    .lista-hover {
        padding: 0;
        background: #444444;
        position: relative;
        top: -95px;
    }
    .lista-hover li {
        padding: 0;
    }
    .dados-pessoa h4,span {
        margin-left: 0.5em;
    }

    #right .usuario_content ul li ul li .info_perfil {display: none;}
    #right .usuario_content ul li:hover ul li .info_perfil {
        color: white;
        display: block;
        z-index: 9999;
        width: 350px;
        height: 200px;
    }
<div id="right">
    <div id="Principal" class="usuario_content">
           <ul>
               <li class="dados-pessoa">
                <h4> <img src="a.png"/> Amanda </h4>
                <span> Status da Pessoa</span> 
                <!--  hover -->
                <ul class="lista-hover">
                    <li><div class="info_perfil">
                        <h5>Texto texto texto</h5>
                    </div></li>
                 </ul>
               </li>
               <!-- fim info 1 -->

               <li class="dados-pessoa">
                <h4> <img src="a.png"/> Amanda </h4>
                <span> Status da Pessoa</span> 
                <!--  hover -->
                <ul class="lista-hover">
                    <li><div class="info_perfil">
                        <h5>Texto texto texto</h5>
                    </div></li>
                 </ul>
               </li>
           </ul>
        </div>
</div>

Bom, eu removi muita coisa do seu código padrão e do CSS também. Criei uma classe só e setei nela os atributos.

No resultado quando você passar o mouse (hover), ele vai jogar a próxima li pra baixo, porque está setado dentro da li anterior.

Você pode mudar essa estrutura, eu tentei manter a sua.

Espero que tenha te ajudado!

0

Lendo a pergunta e os comentários acredito que algo assim que vc precisa.

Tive que usar jQuery para pode controlar o bloco de conteúdo que aparece flutuando ao lado do menu. Não usei exatamente seu código por esse é apena um exemplo ok.

Fiz um menu que fica dentro de um container com overflow, porém vc consegue mostra e esconder elementos que estão fora dele!

Veja como ficou o exemplo: (obs: se vc quiser que funciona como no :hover, basta coloca .hover onde está .click no <script>)

$(".menu-item").click(function(event){
            event.preventDefault();
            $(this).toggleClass("ativo").siblings().removeClass("ativo");
            var id = $(this).attr("href");
            $(id).toggleClass("show").siblings().removeClass("show");
        });
<style>
    
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.dir {
    position: absolute;
    right: 0;
    top: 20px;
    width: 200px;
    height: 230px;
    background-color: gray;
    overflow-y: auto;
}

.dir a {
    text-indent: 0;
    border-bottom: 1px dotted black;
    text-align: center;
    line-height: 50px;
    height: 50px;
    width: 100%;
    background-color: bisque;
    color: brown;
    text-decoration: none;
    display: inline-block;
    transition: all 250ms;
}
.dir a:hover {
    color: black;
    font-weight: bold;
    background-color: rgb(248, 198, 138);
    cursor: pointer;
}
.item {
    position: absolute;
    z-index: 999999;
    right: 220px;
    top: 20px;
    width: 200px;
    height: 100px;
    background-color: silver;
    text-align: center;
    font-size: 32px;
    font-family: sans-serif;
    opacity: 0;
    transition: all 250ms;
}
.ativo {
    color: black !important;
    font-weight: bold;
    background-color: rgb(248, 198, 0) !important;
}
.show {
    opacity: 1;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<aside>
    <div class="dir">
        <nav>
            <a class="menu-item" href="#id1">Itens 1</a>
            <a class="menu-item" href="#id2">Itens 2</a>
            <a class="menu-item" href="#id3">Itens 3</a>
            <a class="menu-item" href="#id4">Itens 4</a>
            <a class="menu-item" href="#id5">Itens 5</a>
            <a class="menu-item" href="#id6">Itens 6</a>
        </nav>
    </div>

    <div id="id1" class="item">Item 1</div>
    <div id="id2" class="item">Item 2</div>
    <div id="id3" class="item">Item 3</div>
    <div id="id4" class="item">Item 4</div>
    <div id="id5" class="item">Item 5</div>
    <div id="id6" class="item">Item 6</div>
</aside>

2
  • muito bom o seu exemplo, porém não funcionou, não sei oque deu de errad
    – goio
    Commented 15/04/2018 às 11:23
  • Como falei para esse exemplo funcionar ele precisa tem uma determinada ordem nas tags HTML, pois o CSS precisa dessa ordem para funcionar. Como falei é apenas um exemplo que vc pode pegar a ideia e adaptar no seu projeto. Se vc tiver alguma outra pergunta, pegue o que já tem pronto e faça uma nova pergunta com a outra dúvida.
    – hugocsl
    Commented 15/04/2018 às 14:07

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 .