Mensaje Nº 1 | 7:16 AM 2021-01-17
Tengo el codigo de abajo, y me gustaría q al hacer scrool se mantuvieran fija la cabecera de las pestañas... Le he estado dando muchas vueltas. Si separo los radio buttons para envolverlos en un div no se muestra el contenido al hacer click, y sin separarlos no soy capar de aplicar clases sticky de ninguna manera. La idea es q la cabecera fuera como un menu sticky de toda la vida. He probado estructuras ul li, pero el enlazado entre pestañas deja de funcionar, con este codigo es tan sencillo como poner en el texto label for tab3, para irte a la pestaña 3 desde cualquier otra.

Ideas, soluciones... bienvenido será cualquier aporte. Gracias.

Código
<div class="layout">
    <div class="tabs">
         <!-- Tab 1   -->
        <input type="radio" name="tab" id="tab1" role="tab" checked />
        <label for="tab1" class="menutabs" id="tab1-label">VISIÓN GENERAL</label>
        <section aria-labelledby="tab1-label">
            <h2> Contenido  Tab 1</h2>
            <p>Hello World</p>
        </section>

        <!-- Tab 2   -->
        <input type="radio" name="tab" id="tab2" role="tab" />
        <label for="tab2" class="menutabs"  id="tab2-label">LOCALIZACIÓN</label>
        <section aria-labelledby="tab2-label">
            <h2> Contenido  Tab 2</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 3   -->
        <input type="radio" name="tab" id="tab3" role="tab" />
        <label for="tab3" class="menutabs"  id="tab3-label">ALOJAMIENTO</label>
        <section aria-labelledby="tab3-label">
            <h2>Contenido Tab 3</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 4   -->
        <input type="radio" name="tab" id="tab4" role="tab" />
        <label for="tab4" class="menutabs" >CURSOS SNOWBOARD/SKI</label>
        <section>
            <h2>Contenido Tab 4</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 5   -->
        <input type="radio" name="tab" id="tab5" role="tab" />
        <label for="tab5" class="menutabs" >¿QUÉ INCLUYE?</label>
        <section>
            <h2>Contenido Tab 5</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 6   -->
        <input type="radio" name="tab" id="tab6" role="tab" />
        <label for="tab6" class="menutabs" >COVID-19</label>
        <section>
            <h2>Contenido Tab 6</h2>
            <p>Hello World</p>
        </section>
        <!-- Tab 7 ENLACE -->
        <input type="radio" onclick="window.location='/tienda';" name="tab" id="tab7" role="tab"  />
        <label for="tab7" class="menutabs" >Reservar</label>

    </div>
</div>
<style>
.tabs p {
    font-size: 2rem;
    line-height: 2rem;
    padding: 0 3rem;
    margin-bottom: 2rem;
}

.menutabs:last-child {
    border: 1px solid;}

.menutabs:last-child:hover {
    color: white;
    background: #ff0000;
}
.menutabs:hover {
    border: 1px solid;
}
.menutabs label{
            transition:all 0.3s ease;

}

    .tabs {
        display: flex;
        flex-wrap: wrap;
            max-width: 98%;
    }
    .tabs > section {
        order: 999;
        width: 100%;
        display: none;
    }
    .tabs > input {
        opacity: 0;
        position: absolute;
    }
    .tabs > input[type="radio"]:checked + label {
        /*Highlight*/
        background-color: #ff0000;
        color: white !important;
    }
    .tabs > input[type="radio"]:checked + label + section {
        display: unset;
    }

    .tabs > label {
        padding: 0.5em 1em;
        color: #ff0000;
            width: 14%;
text-align: center;
            transition:all 0.3s ease;
            font-size: 0.9rem;

    }

    .tabs > input[type="radio"]:checked + label {
        color: #ff0000;
    }
    .tabs section {
        padding: 4em;
    }

Agregado (2021-01-17, 7:17 AM)
---------------------------------------------
Escribe tu mensaje