Position Absolute in div annidati :(

**meldro** · 27-06-2013, 16:58

Fin quando si tratta di un div interno ad un altro, non ho problemi a regolarmi con il position ma in questo caso vado in grossa crisi.

Praticamente vorrei che il div di classe "subdivESTERNO" (che nell'esempio ho riempito di colore nero) sia posizionato in maniera assoluta rispetto al div callse ".contenitore", in modo che, che, subdivESTERNO sia sovrapposto al ".contenitore" e pienamente visibile al contrario di quanto avviene ora nel codice sottostante.

Grazie per qualsiasi dritta!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta name="generator" content=
              "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
        <title>
            DEMO
        </title>
        <style type="text/css">

                .contenitore {

                    display: none;

                    margin-top: 10px;
                    width: 358px;
                }


                .form {
                    background-color: #E3E3E3;
                    overflow: auto;
                    padding: 5px;
                }


                .primo_div_interno {
                    background: none repeat scroll 0 0 #F6F6F6;
                    color: #192535;
                    font-family: 'pt sans',arial,helvetica,sans-serif;
                    font-size: 16px;
                    margin: 0;
                    padding: 0;
                }

                .secondo_div_interno {
                    background: none repeat scroll 0 0 #FFFFFF;
                    position: relative;
                }


                .secondo_div_interno .subdiv {
                    bottom: 0;
                    color: #FFFFFF;
                    left: 1px;
                    overflow: hidden;
                    padding: 9px;
                    position: absolute;
                    right: 0;
                    top: 1px;
                    white-space: pre-wrap;
                    word-wrap: break-word;
                }

                .secondo_div_interno .subdivESTERNO {
                    background-color: black;
                    border: 1px solid #B2B2B2;
                    border-radius: 0 0 5px 5px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
                    height: 200px;
                    left: 0;
                    margin-top: -2px;
                    position: absolute;
                    right: 0;
                    z-index: 10000;
                }

                textarea{
                    overflow: hidden; 
                    height: 48px;
                }
            </style>
        </head>
        <body>
            <div class="contenitore" style="display: block;">
                <form class="form">
                    <div class="primo_div_interno">
                        <div class="secondo_div_interno">
                            <div class="subdiv">
                                <div>
                                    Ciao come stai?
                                </div>
                            </div>
                            <textarea placeholder="Scrivi un commento...">
                            </textarea>
                            <div class="subdivESTERNO" style=""></div>
                        </div>
                    </div>
                </form>
            </div>
        </body>
    </html>

**webbeloz** · 27-06-2013, 18:02

prova a cambiare in questo modo:

codice:

.secondo_div_interno .subdivESTERNO {
    background-color: black;
       border: 1px solid #B2B2B2;
          border-radius: 0 0 5px 5px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        top:0;
      left: 0;
  right:0;
bottom:0;
position: absolute;
z-index: 10 }

**meldro** · 27-06-2013, 18:10

Ti ringrazio.
Lo provo immediatamente, in alternativa ho scoperto che anche solo togliendo l'overflow al form dovrei ottenre l'effetto che cerco.

Maledetti codici scritti da terzi sui quali devi mettere mano...

Discussione: Position Absolute in div annidati :(

Strumenti discussione

Ricerca discussione

Visualizza

Position Absolute in div annidati :(

Permessi di invio