CSS [RISOLTO] Sovrapposizione elementi con position: absolute

[System_error]

Salve a tutti, sto realizzando un sito web per mio zio utilizzando HTML5 e CSS, ma mi sono imbattuto in un problema.
La home per ora ha una barra in alto e uno slider dove vengono visualizzate delle auto.
Lo slider ha due tasti: "+" e "-" che servono per scorrere le foto.
Il problema è che se scrollo la pagina questi tasti si sovrappongono alla barra che sta sempre in alto, e io voglio che invece passino sotto, come posso fare?
ho settato per i bottoni la proprietà position: absolute; , ho provato a cambiare in relative, fixed ecc.. le ho provate tutte ma non funziona, se tolo absolute i due pulsanti vanno in fondo alla pagina e scompaiono dalla posizione in cui dovrebbero essere.
Il codice che ho usato per i pulsanti è questo e per lo slider è questo.

.precedente {border-radius: 0px 10px 10px 0px;}

.successivo{margin-left: 942px; border-radius: 10px 0px 0px 10px;}

#box img{width: 100%; height: 500px;}
            
#slider{width: 1000px; height: 500px; margin: 20px auto; border: 10px solid white; box-shadow: 0px 0px 5px 2px #ccc;}
            
button{padding: 20px; border: none; background: #00c4ff; font-size: 30px; color: white; position: absolute; top: 45%; cursor: pointer;}

ecco un esempio dell'errore

ecco invece come dovrebbe essere

qualcuno sa aiutami?

 

[Kolo93]

Servirebbe anche l'HTML per poterti aiutare.
Nella maggior parte dei casi, bisogna creare dei contenitori aggiuntivi. Sembra una cosa ridondante ma servono per applicare delle regole CSS.
Non conoscendo l'HTML, potrei dire che non hai messo qualche div o che li hai posizionati male.

--- EDIT ---

Voglio comunque proporti una soluzione, non l'ho testata ma dovrebbe funzionare.
Organizzando in questo modo l'HTML, puoi utilizzare un "position: absolute;" sui due pulsanti.
In questo modo "fluttueranno" all'interno del contenitore con classe "slider".

<div class="container">
    <div class="header">
        <navbar>
            ...
        </navbar>
    </div>
    <div class="container">
        <div class="slider" id="slider">
            <div class="slideshow-container">
                ...
            </div>
            <div class="navigation">
                <div class="precedente">-</div>
                <div class="successivo">+</div>
            </div>
        </div>
    </div>
</div>

A questo punto potresti dare un "left: 0;" a ".precedente" e un "right: 0;" a ".successivo" per posizionarli ai lati dello ".slider".
Ammettendo che tu stia utilizzando i flexbox ( dei tag hanno una regola "display: flex" [e non solo]), dovresti cavartela con un "vertical-align: middle;".

Fammi sapere.

 

[</Maz>]

Guarda da ció che ho capito riguardo al problema credo che uno z-index sia piú che sufficiente, naturalmente come @Kolo93 afferma... senza HTML si va per ipotesi.

button { z-index: -10 }
.tuoheader { z-index: 10 }

 

[System_error]

si scusate, ecco il codice.
Per la soluzione di @Kolo93, devo mettere tutto il codice in un div, e crearmi altri div dentro?
Non sono molto pratico purtroppo di css e html.
Grazie comunque per le risposte

        <header>
            <nav>
                <ul>
                    <a href = "#"><li><img width = 150px; src = "immagini/logo1.png"></li></a>
                    <li><a href = "#">AUTO</a>
                        <ul>
                            <li><a href = "#">NUOVE</a></li>
                            <li><a href = "#">USATE</a></li>
                        </ul>
                    </li>
                    <li><a href = "#">CHI SIAMO</a>
                        <ul>
                            <li><a href = "#">DOVE SIAMO</a></li>
                        </ul>
                    </li>
                    <li><a href = "#">CONTATTI</a></li>
                </ul>   
            </nav>
        </header><br/><br/><br/>
        
        <div id = "slider">
            <div class = "tasti">
                <button class = "precedente" onclick = "immagine_precedente()"><</button>
                <button class = "successivo" onclick = "immagine_successiva()">></button>
            </div>
            <div id = "box">
                <img src = "http://vincycar.altervista.org/images/Immagini/macchine/IMG_0359.JPG">
        </div>

@</Maz> cos'è z-index?

 

[</Maz>]

@</Maz> cos'è z-index?

Whoops, colpa mia... z-index è una proprietá CSS che permette di impostare il livello di visibilitá di un elemento, in rete trovi molti esempi su come utilizzarlo.

Nel codice che ti ho fornito ho incrementato il livello di visibilitá del tuo header per impedire ch'esso venga coperto dai bottoni.

 

[Dazorn]

Imposta il tuo div#slider con

div#slider {
    position: relative;
}

button.precedente, button.successivo {
    position: absolute;
}

In questa maniera, stai dicendo ai tuoi bottoni di posizionarsi in maniera assoluta all'interno del tuo div relativo.
Dovrebbe risolvere il tuo problema.

 

[System_error]

Imposta il tuo div#slider con

div#slider {
    position: relative;
}

button.precedente, button.successivo {
    position: absolute;
}

In questa maniera, stai dicendo ai tuoi bottoni di posizionarsi in maniera assoluta all'interno del tuo div relativo.
Dovrebbe risolvere il tuo problema.

Scusate la risposta in ritardo ma non ho potuto controllare subito con i vostri codici.
Comunque con z-index scompaiono proprio i bottoni.
Invece con il codice di @Dazorn succede che anche le immagini quando scorro in su passano sopra la barra che c'è in alto.
Avete altri consigli? grazie mille comunque per l'aiuto

 

[Dazorn]

Scusate la risposta in ritardo ma non ho potuto controllare subito con i vostri codici.
Comunque con z-index scompaiono proprio i bottoni.
Invece con il codice di @Dazorn succede che anche le immagini quando scorro in su passano sopra la barra che c'è in alto.
Avete altri consigli? grazie mille comunque per l'aiuto

Semplicemente alza il z-index della barra ed imposta quello di immagini e bottoni ad un valore basso.
Tipo così:

barra { z-index: 99; }
bottoni { z-index: 3; }
immagini { z-index: 2; }

 

[System_error]

Semplicemente alza il z-index della barra ed imposta quello di immagini e bottoni ad un valore basso.
Tipo così:

barra { z-index: 99; }
bottoni { z-index: 3; }
immagini { z-index: 2; }

Risolto! grazie mille! ho messo nella mia barra z-index: 100; e sui bottoni z-index: 1
Da come ho capito z-index imposta una priorità sugli elementi, o una cosa del genere, giusto?

 

[Dazorn]

Risolto! grazie mille! ho messo nella mia barra z-index: 100; e sui bottoni z-index: 1
Da come ho capito z-index imposta una priorità sugli elementi, o una cosa del genere, giusto?

Z-Index si riferisce al livello di prondità (asse z) dell'elemento all'interno della pagina. Maggiore è il valore, più sarà portato in primo piano.

 

[System_error]

Risolto! grazie mille! ho messo nella mia barra z-index: 100; e sui bottoni z-index: 1
Da come ho capito z-index imposta una priorità sugli elementi, o una cosa del genere, giusto?

Z-Index si riferisce al livello di prondità (asse z) dell'elemento all'interno della pagina. Maggiore è il valore, più sarà portato in primo piano.

Perfetto, grazie mille a tutti!


Inviata da iPhone tramite app ufficiale di Inforge.net