Sovrapposizione dei contenuti posizionamento assoluto

StackOverflow https://stackoverflow.com/questions/1290877

  •  18-09-2019
  •  | 
  •  

Domanda

Sto avendo un po 'di difficoltà con questa pagina . E 'quasi di funzionare correttamente.

La scatola rossa deve essere centrato (h & v) sulla finestra. OPERE.

La scatola gialla deve essere apposta nella parte inferiore della finestra. OPERE.

Quando la finestra è a meno di 400 pixel barre di alta scorrimento dovrebbe apparire e la scatola gialla dovrebbe apparire nella parte inferiore dell'area di scorrimento. Fondamentalmente io non voglio mai la scatola gialla per apparire sopra la casella rossa , o vice versa. NON FUNZIONA

Qualcuno sa come posso raggiungere questo obiettivo?

Grazie.

È stato utile?

Soluzione

Aggiungi questo al CSS per #wrapper: 

height: 100%;
position: relative;

Il motivo per cui funziona è perché gli elementi posizionati in modo assoluto sono posizionati rispetto al viewport causa dell'assenza di qualsiasi altra blocco contenitore . Con l'aggiunta di position: relative al #wrapper (o la body per questo) è assicurarsi che il blocco contenente diventa l'intero contenuto del corpo, invece.

Il height: 100% è quindi necessaria solo per assicurare che il blocco contenente almeno non raggiunge il fondo della finestra.

Altri suggerimenti

#footer{z-index: 1000;}
#logo{z-index: 1001;}

z-index è quello che serve. anche se 1000 è un po 'eccessivo un semplice 

#footer{ z-index:2; }
#logo{ z-index:3; }

farebbe il trucco

E 'utile ricordare che, senza specificare z-index, gli elementi di impilare con la più recente elemento 'più alto' in ordine z. Quindi, se si voleva evitare di specificare z-index, invertire il codice html: 

<body>


    <div id="wrapper">

        <div id="footer">

            This is the footer. It should always appear at the bottom of the page, but not over the red box.            

        </div>

        <div id="logo">
            <h1>Logo</h1>
        </div>

    </div>

</body>

In caso contrario, come l'altra risposta suggeriscono, specificando un numero maggiore per il #logo che per il #footer causerà #logo ad essere più elevato.

Per far rispettare le barre di scorrimento quando la finestra di visualizzazione porte è <400px, 

#wrapper {
min-width: 400px;
min-height: 400px;
overflow: scroll; /* or overflow: auto */
}

Z-Index non è un fattore qui. Z-Index consentirà ancora gli elementi di sovrapposizione -. Detterà solo quale sia l'elemento in cima

Utilizzare un float elemento ing dopo il div rosso nel flusso di documenti, e quindi l'uso di trasparente sul giallo per creare una relazione tra gli elementi (cioè la div giallo sarà Cancella il rosso e non si sovrappongono).

sandwich un elemento relativamente dimensioni (ad esempio height: 100% ) tra i due spingerà la div giallo alla parte inferiore dello schermo, ma può essere difficile da allineare verticalmente correttamente

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top