estoy haciendo una landing page y el box model no lo tengo muy claro por lo que hay algunas cosas que se me están complicando. Hice mi header fijo pero al llegar al apartado testimonios cuando hago scroll, este modulo se superpone al header ocultandolo porque tiene posicion absoluta. La cosa es que no se como hacer el modulo testimonios sin la posicion absoluta ya que es un slider asique me gustaría que me dierais alguna alternativa a como puedo hacer mi header fijo a la vez mantener mi slider sin que se superponga al header. Ya de paso si me dais alguna isntruccion sobre como mejorar el slider lo agradeceria mucho porque está hecho en plan chapuza con los botones separados de la seccion y con margin. Asi como esta hecho es la unica forma que me ha salido lo que queria hacer pero creo que esta muy chapuza.
Pego mi codigo html y css Mil gracias de ante mano!
HTML->
<body>
<!-- header -->
<header>
<div class="header-contenido">
<a id="logo-header" href="index.html">
<span class="logo-text"> <span class="color-uno">logo</span>
</a>
<nav class="nav-menu">
<ul>
<li><a id="subrayado" href="#quienes-somos">Sobre nosotros</a></li>
<li><a id="subrayado" href="#testimonios">Testimonios</a></li>
<li><a id="subrayado" href="#sabias-que">¿Sabías qué?</a></li>
<li><a id="subrayado" href="#contacto">Contacto</a></li>
</ul>
</nav>
<div class="linea-divisora"></div>
</div>
</header>
<!-- fin header -->
<!-- Sobre nosotros -->
<section id="quienes-somos">
<h1>¿Quiénes somos?</h1>
<div class="desccripcion-qs">
<p class="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus repudiandae, laudantium dolorem inventore asperiores vel sunt quasi doloremque incidunt necessitatibus impedit consequuntur nostrum minus aliquid perferendis? Tenetur sunt nam quos?
<p class="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti vitae ullam doloribus, facilis sint eos amet. Quos error nemo obcaecati minus voluptas consectetur deserunt veniam fuga, voluptatem id dolorem eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam tempora accusantium ea debitis nulla, ut, nihil ratione exercitationem sint vitae possimus in aliquid labore rerum distinctio dolore magni. Veniam, voluptatibus?</p>
</div>
<h3 class="asociacion">Lorem ipsum</h3>
<p class="descripcion-asociacion">
<p class="parrafo">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti unde nulla rerum minima reprehenderit totam inventore ab, modi voluptas deserunt nihil, quidem optio ipsam voluptate tenetur repellat itaque ad?</p>
<p class="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, voluptates! Aliquam aliquid delectus et unde, explicabo laudantium obcaecati nisi, earum cupiditate sunt commodi libero vitae impedit quis sed architecto totam!</p>
<p class="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum nulla debitis culpa excepturi quo veniam officiis deleniti aperiam voluptate eius minima voluptatem placeat nam cum possimus, esse nesciunt, ipsam ratione..</p>
</p>
</section>
<!-- fin Sobre nosotros -->
<!-- Testimonios -->
<section id="testimonios" class="contenedor-testimonios">
<ul class="slider-testimonios">
<div class="slide-dots">
<li id="slide1">
<div class="titulo-descipcion">
<h2 class="titulo-testimonios">Testimonios</h2>
<p class="descripcion-testimonio">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id est, quis possimus rem, exercitationem, perspiciatis officia maxime quia porro nulla consectetur corrupti molestiae error itaque aliquid veniam aperiam. Dolore, fuga!.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni aliquam non debitis nisi laborum! Error eligendi possimus similique obcaecati. Illo voluptatibus quo similique libero consequatur, ipsa explicabo corporis sed voluptate!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis, commodi! Aspernatur placeat facilis similique, debitis delectus vero natus exercitationem. Quaerat vel modi nisi neque nam sint nulla, quidem repudiandae eligendi?
L</p>
</div>
<div class="usuario">
<img class="imagen-perfil" src="images/emilio.jpg" alt="emilio">
<p class="nombre">Emilio</p>
<p class="anos">lorem ipsum</p>
</li>
</div>
<li id="slide2">
<div class="titulo-descipcion">
<h2 class="titulo-testimonios">Testimonios</h2>
<p class="descripcion-testimonio">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id est, quis possimus rem, exercitationem, perspiciatis officia maxime quia porro nulla consectetur corrupti molestiae error itaque aliquid veniam aperiam. Dolore, fuga!.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni aliquam non debitis nisi laborum! Error eligendi possimus similique obcaecati. Illo voluptatibus quo similique libero consequatur, ipsa explicabo corporis sed voluptate!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis, commodi! Aspernatur placeat facilis similique, debitis delectus vero natus exercitationem. Quaerat vel modi nisi neque nam sint nulla, quidem repudiandae eligendi?
L
</p>
</div>
<div class="usuario">
<img class="imagen-perfil" src="images/rosa.jpg" alt="emilio">
<p class="nombre">Rosa</p>
<p class="anos">lorem ipsum</p>
</li>
<li id="slide3">
<div class="titulo-descipcion">
<h2 class="titulo-testimonios">Testimonios</h2>
<p class="descripcion-testimonio"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id est, quis possimus rem, exercitationem, perspiciatis officia maxime quia porro nulla consectetur corrupti molestiae error itaque aliquid veniam aperiam. Dolore, fuga!.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni aliquam non debitis nisi laborum! Error eligendi possimus similique obcaecati. Illo voluptatibus quo similique libero consequatur, ipsa explicabo corporis sed voluptate!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis, commodi! Aspernatur placeat facilis similique, debitis delectus vero natus exercitationem. Quaerat vel modi nisi neque nam sint nulla, quidem repudiandae eligendi?
L</p>
</div>
<div class="usuario">
<img class="imagen-perfil" src="images/enrique.jpg" alt="emilio">
<p class="nombre">Enrique</p>
<p class="anos">lorem ipsum</p>
</li>
</ul>
</section>
<div class="botones-slider">
<ul class="navegacion-testimonios">
<li>
<a class="dots" href="#slide1"></a>
</li>
<li>
<a class="dots" href="#slide2"></a>
</li>
<li>
<a class="dots" href="#slide3"></a>
</li>
</ul>
</div>
<!-- fin Testimonios -->
<div class="texto-falso">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illum facilis quaerat itaque sit error magnam consectetur. Quaerat quidem voluptate dolorem consequatur sed in architecto ullam tenetur, error quod expedita?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab temporibus ut dolores nihil quibusdam consequatur reprehenderit minus nulla quo repudiandae. Expedita modi inventore corporis nihil architecto maxime enim vero sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga a odio ipsum ex alias, laudantium eligendi aliquid similique odit iste laboriosam ullam illo? Atque repudiandae nisi doloremque, libero magni dicta!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum totam quasi illo corrupti quod? Nam est itaque reiciendis voluptas in corrupti a reprehenderit necessitatibus odit officiis aut quis, id veniam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique non eligendi ex. Modi nam, voluptates porro recusandae atque laboriosam ratione, sed ex laudantium velit necessitatibus, placeat quasi maxime! Vel, illo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum minima aperiam architecto. Error commodi, aliquid nobis necessitatibus ipsa quos, obcaecati autem quam molestias voluptas ea sed, eos minus fugiat laborum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum maiores sequi architecto natus, ut temporibus itaque fugit quod doloribus amet? Quam, sed pariatur commodi id distinctio totam accusamus quia numquam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. A, necessitatibus debitis cupiditate, inventore esse sunt natus consequatur autem nostrum nobis iure accusantium ratione, iste laborum quas quasi deserunt eos enim!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste deleniti consectetur et cum magni ipsam modi iusto non molestiae, sed dolorem at saepe similique sequi vel ipsum quibusdam assumenda! Sequi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illum facilis quaerat itaque sit error magnam consectetur. Quaerat quidem voluptate dolorem consequatur sed in architecto ullam tenetur, error quod expedita?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab temporibus ut dolores nihil quibusdam consequatur reprehenderit minus nulla quo repudiandae. Expedita modi inventore corporis nihil architecto maxime enim vero sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga a odio ipsum ex alias, laudantium eligendi aliquid similique odit iste laboriosam ullam illo? Atque repudiandae nisi doloremque, libero magni dicta!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum totam quasi illo corrupti quod? Nam est itaque reiciendis voluptas in corrupti a reprehenderit necessitatibus odit officiis aut quis, id veniam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique non eligendi ex. Modi nam, voluptates porro recusandae atque laboriosam ratione, sed ex laudantium velit necessitatibus, placeat quasi maxime! Vel, illo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum minima aperiam architecto. Error commodi, aliquid nobis necessitatibus ipsa quos, obcaecati autem quam molestias voluptas ea sed, eos minus fugiat laborum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum maiores sequi architecto natus, ut temporibus itaque fugit quod doloribus amet? Quam, sed pariatur commodi id distinctio totam accusamus quia numquam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. A, necessitatibus debitis cupiditate, inventore esse sunt natus consequatur autem nostrum nobis iure accusantium ratione, iste laborum quas quasi deserunt eos enim!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste deleniti consectetur et cum magni ipsam modi iusto non molestiae, sed dolorem at saepe similique sequi vel ipsum quibusdam assumenda! Sequi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illum facilis quaerat itaque sit error magnam consectetur. Quaerat quidem voluptate dolorem consequatur sed in architecto ullam tenetur, error quod expedita?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab temporibus ut dolores nihil quibusdam consequatur reprehenderit minus nulla quo repudiandae. Expedita modi inventore corporis nihil architecto maxime enim vero sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga a odio ipsum ex alias, laudantium eligendi aliquid similique odit iste laboriosam ullam illo? Atque repudiandae nisi doloremque, libero magni dicta!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum totam quasi illo corrupti quod? Nam est itaque reiciendis voluptas in corrupti a reprehenderit necessitatibus odit officiis aut quis, id veniam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique non eligendi ex. Modi nam, voluptates porro recusandae atque laboriosam ratione, sed ex laudantium velit necessitatibus, placeat quasi maxime! Vel, illo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum minima aperiam architecto. Error commodi, aliquid nobis necessitatibus ipsa quos, obcaecati autem quam molestias voluptas ea sed, eos minus fugiat laborum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum maiores sequi architecto natus, ut temporibus itaque fugit quod doloribus amet? Quam, sed pariatur commodi id distinctio totam accusamus quia numquam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. A, necessitatibus debitis cupiditate, inventore esse sunt natus consequatur autem nostrum nobis iure accusantium ratione, iste laborum quas quasi deserunt eos enim!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste deleniti consectetur et cum magni ipsam modi iusto non molestiae, sed dolorem at saepe similique sequi vel ipsum quibusdam assumenda! Sequi.
</p>
</div>
</body>
CSS->
*{
margin: 0;
padding: 0;
font-family: var(--fontPrimary);
color: var(--colorPrimary);
scroll-behavior: smooth;
}
body{
max-width: 100%;
}
a{
text-decoration: none;
}
h2{
color: var(--colorPrimary);
font-size: var(--fontSizeH2);
margin-block-end: 30px;
}
h3{
color: var(--colorComplementary);
font-size: var(--fontSizeH3);
}
/* estilos header */
header{
width: 100%;
margin-block-start: 50px;
background-color: #ffffff;
}
.header-contenido{
background-color: #FFFFFF;
width: 100%;
left: 0;
top: 0;
position: fixed;
height: 97px;
color: #FFF;
}
.header-contenido a{
text-decoration: none;
}
#logo-header{
font-size: var(--fontSizeLogo);
font-weight: var(--fontWeightPrimary);
float: left;
padding:25px 0 0 50px;
text-decoration: none;
}
.color-uno{
color: var(--colorPrimary);
}
.color-dos{
color: var(--colorSecundary);
}
.nav-menu{
float: right;
font-weight: var(--fontWeightSecundary);
}
.nav-menu ul{
list-style: none;
padding-right: 100px;
}
.nav-menu ul li{
display: inline-block;
line-height: 80px;
transition: -5s;
}
.nav-menu ul li a{
padding: 0 20px;
text-decoration: none;
position: relative;
}
/* animacion nav */
#subrayado {
position: relative;
text-decoration: none;
}
#subrayado::before {
content: "";
position: absolute;
width: 100%;
height: 4px;
border-radius: 24px;
bottom: -4px;
left: 0;
background-color: blue;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
#subrayado:hover::before {
visibility: visible;
transform: scaleX(1);
}
/* fin animacion nav */
.linea-divisora{
margin-block-start: 97px;
border: 0.5px solid #3B3B3B;
}
/* fin estilos header */
/* estilos "sobre nosotros" */
#quienes-somos{
margin-block-start: 180px;
margin-inline-start: 80px;
margin-inline-end: 156px;
}
h1{
font-size: var(--fontSizeH1);
margin-block-end: 20px;
}
.parrafo{
line-height: 28px;
margin-block-start: 10px;
font-size: var(--fontSizeP);
}
.asociacion{
margin-block-start: 64px;
}
.descripcion-asociacion{
margin-block-start: 12px;
}
/* fin estilos "sobre nosotros" */
/* estilos "testimonios" */
#testimonios{
margin-block-start: 45px;
margin-block-end: 168px;
}
ul, li {
list-style: none;
}
.titulo-testimonios{
padding-top: 39px;
text-align: center;
color: var(--colorParrafo);
}
.descripcion-testimonio{
color: #FFFFFF;
margin-inline-start: 80px;
margin-inline-end: 156px;
line-height: 28px;
text-align: center;
margin-block-start: 28px;
}
.usuario{
text-align: center;
}
.nombre,
.anos{
margin-block-start: 5px;
color: white;
}
.imagen-perfil{
margin-top: 34px;
width: 153px;
height: 153px;
object-fit: cover;
border-radius: 100px;
}
.slider-testimonios{
text-align: center;
width: 100%;
}
.slider-testimonios li {
position: absolute;
left: 0px;
opacity: 0;
transition: opacity .5s;
background: var(--colorSecundary);
}
.slider-testimonios li:first-child {
opacity: 10; /*Mostramos el primer <li>*/
}
.slider-testimonios li:target {
opacity: 10; /*Mostramos el <li> del enlace que pulsemos*/
}
.botones-slider{
margin-top: 231px;
width: 100%;
display: flex;
justify-content: center;
left: 0px;
position: absolute;
}
.navegacion-testimonios{
background-color: var(--colorSecundary);
display: flex;
justify-content: center;
align-items: center;
gap: 6.89px;
width: 100%;
height: 80px;
padding: 0;
}
.dots{
text-decoration: none;
background-color: white;
padding: 10px;
width: 1.5px;
height: 1.5px;
border-radius: 100%;
display: inline-block;
}
/* fin testimonios */
.texto-falso{
margin-top: 500px;
}