Divs layering probleem

[diac21]

Voor school ben ik bezig met het maken van website. Ik ben niet erg ervaren en ben al lang blij dat ik heb kunnen maken wat ik gemaakt heb. Ik heb echter nu een probleem waar ik niet uitkom.

Allereerst de website: http://eduweb.hhs.nl/~08017530/advies.html. Bij advies zijn er 7 vierkantjes welke elk een andere tekst laten zien. Omdat ik geen mooie oplossing vond voor het vermelden van hoe de vierkantjes heten, wilde ik een tooltip laten zien met daarin een bepaalde inhoud met een bepaalde opmaak. Dit is allemaal gelukt alleen staat de tooltip achter de tekst uit de div.

Dit komt doordat ik een div heb aangemaakt, waarin de vierkante radiobuttons zitten. In deze div zit de div voor de tekst en ligt dus feitelijk op de vierkantjes. Een tooltip van de vierkantjes komt dus altijd onder de tekst. Het heeft al enige tijd geduurd voordat ik hier achter kwam. Een poging om de vierkantjes en tekst divs om te draaien lukt mij niet. Ik raak dan de kluts kwijt met de positioning van absolute en relative en of het uberhaubt wel zo kan.

Hieronder de belangrijkste html en css. Zou iemand mij tips kunnen geven over hoe ik dit wel kan oplossen? Heb zelf al uren gezocht naar oplossingen, maar ik ben het spoor bijster. Alvast bedankt!

HTML:

<div class="inhoud">
        <h1>Advies</h1>
        <div class="cr-container">
                
            <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>   
            <label for="select-img-1" class="cr-label-img-1"><div class="tooltip"><span>Advies</span></div></label>
                
            <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
            <label for="select-img-2" class="cr-label-img-2"><span>Stappenplan interieur</span></label>
                
            <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
            <label for="select-img-3" class="cr-label-img-3"><span>Stap 1: indeling</span></label>
                
            <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
            <label for="select-img-4" class="cr-label-img-4"><span>Stap 2: meubelen</span></label>
                
            <input id="select-img-5" name="radio-set-1" type="radio" class="cr-selector-img-5" />   
            <label for="select-img-5" class="cr-label-img-5"><span>Stap 3: kleuren en materialen</span></label>
                
            <input id="select-img-6" name="radio-set-1" type="radio" class="cr-selector-img-6" />
            <label for="select-img-6" class="cr-label-img-6"><span>Stap 4: verlichting</span></label>
                
            <input id="select-img-7" name="radio-set-1" type="radio" class="cr-selector-img-7" />
            <label for="select-img-7" class="cr-label-img-7"><span>Stap 5: unieke accenten</span></label>
            
                
        <div class="cr-titles">
            <h3><span><p>tekst 1</p></span></h3>
                    
            <h3><span><p>tekst 2</p></span></h3>
                    
            <h3><span><p>tekst 3</p></span></h3>
            
            <h3><span><p>tekst 4</p></span></h3>
            
            <h3><span><p>tekst 5</p></span></h3>
             
            <h3><span><p>tekst 6</p></span></h3>
              
            <h3><span><p>tekst 7</p></span></h3>
        </div>
    </div>

Cascading Stylesheet:

.cr-container{
    width: 330px;
    height: auto;
    position: relative;
    z-index:1000;
    
}

.cr-container label{
    width: 30px;
    height: 30px; 
    cursor: pointer;
    float:left;
    position: relative;
    margin-top:330px;
    z-index: 1000;  
    font-size:0px;
}

.cr-container label:before{
    content:'';
    width: 15px;
    height: 15px;
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 0px 0px 3px rgba(133,133,133,0.6);
    position: absolute;
    margin-left: px;
    margin-top: 10px;
    z-index:0;
}

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4,
.cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5,
.cr-container input.cr-selector-img-6:checked ~ label.cr-label-img-6,
.cr-container input.cr-selector-img-7:checked ~ label.cr-label-img-7{
    color: #fff;
    font-size:0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before,
.cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5:before,
.cr-container input.cr-selector-img-6:checked ~ label.cr-label-img-6:before,
.cr-container input.cr-selector-img-7:checked ~ label.cr-label-img-7:before{
    background: #fff;
    
    box-shadow: 0px 0px 0px 3px rgba(33,33,33,0.8);
}
.cr-container input{
    display: none;
}

.cr-titles h3 span{
    margin-right: 20px;
    color: #333;
    z-index: 1001;
    position: absolute;
    left: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.8s ease-in-out;
    -moz-transition: opacity 0.8s ease-in-out;
    -o-transition: opacity 0.8s ease-in-out;
    -ms-transition: opacity 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out;
}
.cr-container input:checked ~ .cr-titles h3 span{
    opacity: 0;
    text-shadow: 0px 0px 30px #fff;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span,
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span,
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span,
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span,
.cr-container input.cr-selector-img-5:checked ~ .cr-titles h3:nth-child(5) span,
.cr-container input.cr-selector-img-6:checked ~ .cr-titles h3:nth-child(6) span,
.cr-container input.cr-selector-img-7:checked ~ .cr-titles h3:nth-child(7) span{
    opacity: 1;
}

/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
.cr-container input{
    display: inline;
    width: 24%;
    margin-top: 350px;
    z-index: 1000;
    position: relative;
}

.cr-container label{
    display: none;
}
}

.cr-label-img-1:hover span, .cr-label-img-2:hover span, .cr-label-img-3:hover span, .cr-label-img-4:hover span, .cr-label-img-5:hover span, .cr-label-img-6:hover span, .cr-label-img-7:hover span{
      position: absolute;
      top:-35px;
      left:10px;
      width: 170px;
      height: 15px;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0px 0px 0px 3px rgba(33,33,33,0.8);
      padding: 5px;
      font-size: 12px;
      text-align: center;
      color: #333;
      z-index: 1000;
}

.inhoud {
    position: relative;
    float: left;
    left: 210px;
    top: 229px;
    
    width: 360px;
    height: auto;
    background-color: rgba(255,255,255,0.9);
    border-top-right-radius: 20px 20px;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    border-bottom-left-radius: 20px 20px;
    color: #333;
}

[Verwijderd]

".cr-titles h3 span" heeft een span van z-index: 1001; en je tooltip heeft een z-index: van 1000.
Dat is de rede, die twee omdraaien of bij .cr-titles h3 span de z-index verwijderen.

De H3 op de manier gebruiken zoals je nu doet is overigens niet erg handig.

[diac21]

held! Veel dank, omdraaien werkte niet, maar het verwijderen wel.

Ik zou volgens mij de hele benaming H3 weg kunnen halen of er P van kunnen maken. Ik heb deze css code ergens vandaan gehaald en bewerkt. H3 heb ik nog niet aangepast.

Maar nogmaals dank!