Chevauchement de slider

Bonjour à tous,

j'ai crée un slider sur le quel j'ai écris un texte,mais il chevauche le contenu en dessous.

Quand j'utilise l'inspecteur et que j'enlève le display:flex et la position: relative sur la div SLIDER et que j'enleve la position:absolute sur la div SLIDER.IMG
Le contenu en dessous revient sauf que le slider n'est plus en place

<div class="slider"> <!-- div principale -->

    <input type="radio" name="images" id="i1" checked>
    <input type="radio" name="images" id="i2">

    <div class="slider_img" id="one"> <!-- div contenant les images -->
        <img src="images/slider/bg2.jpg"/>

        <label for="i1" class="suivante">
          <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </label>
        <label for="i1" class="precedente">
          <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </label>

    </div>

    <div class="slider_img" id="two">
        <img src="images/slider/bg1.jpg"/>
        <label for="i2" class="precedente">
          <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </label>
        <label for="i2" class="suivante">
          <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </label>
    </div>

      <div class="texte">
        <p><span>Webagency</span>:L'agence de tous </br>
        vos projets!</p>
        <p>Vous avez un projet web? La WebAgency vous aide à le réaliser</p>
        <div class="Bouton_info">
        <a href="#">Plus d'infos</a>
        </div>
     </div>
  </div>

.slider /* div principale */
{
	max-width: 100%;
	width:100%;
	position: relative; 
	display: flex;
}
.slider .slider_img /* div contenant les images */
{
	position: absolute;
	width: 100%;
	max-width: 100%;
	z-index: -1;
}

.slider_img img
{
	width: 100%;
}
.slider .slider_img #i1,#i2
{
	display: none;
}
.precedente, .suivante
{
	width: 49px;
	height: 75px;
	border-radius: 50%;
	position: absolute;
	top: 220px ;
	background-color: rgba(0,0,0,0.5);
	z-index: 99;
	cursor: pointer;
}
.precedente
{
	border-radius: 0 40px 40px 0;
	left: 0;
}
.suivante
{
	border-radius: 40px 0 0 40px;
	right: 0;
}
#i1:checked ~ #two,#i2:checked ~ #one
{
	z-index: 9;
}
.slider .slider_img .fa-chevron-left
{
	position: relative;
	 top: 25px;
	left: 13px;
	color:rgba(255,255,255,0.6);
	font-size: 20px;
}
.slider .slider_img .fa-chevron-right
{
	position: relative;
	top: 25px;
	left: 18px;
	color: rgba(255,255,255,0.6);
	font-size: 20px;
}
.slider .texte
{
	position: absolute;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 2.5rem;
	color: white;
	top: 130px;
	left: 130px;
	z-index: 10;

}
.slider .texte p span
{
	color:#5CABD1;
}
.slider .texte p + p
{
 font-size: 13px;
 margin-top: 20px;
}

.slider .texte .Bouton_info a
{
    background-color:#5CABD1 ;
    border-radius: 4px;
    color: white;
    padding: 15px 20px;
    text-align: center;
    text-decoration:none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    text-transform: none;
    margin-top: 30px;

}

Modifié par BastienLuiz (28 Mar 2018 - 17:11)