[Résolu] Z-index & overflow?

Bonjour,

J'ai une question dans une modal j'ai un select dont la liste d'options a une z-index à 6.
Cependant, si je mets un overflow dans la body de cette modal, mon z-index disparait ... EN quoi l'overflow peut faire "disparaite " le z-index ?

Exemple avec overflow :


Exemple sans overflow :


Modifié par pacsys (12 Sep 2019 - 11:27)

Salut

Peux-on tester ton site ?

Salut,

c'est un select natif ?

Non pas du tout.

<div>
    <div class="select">
        <div class="select__content select__content_isOpen">
            <div class="select__content_text">Test</div>
            <i class="fas fa-chevron-down select__content_icon"></i>
            <input type="text" name="name" style="display:none">
        </div>
        <div 
        class="select__options" >
            <div class="select__options_item selected">
                Test
            </div>
            <div class="select__options_item">
                Choix 1
            </div>
            <div class="select__options_item">
                Choix 1
            </div>
        </div>
    </div>
</div>

.select{
	position:relative;
	width: 100%;
	// font-size:12px;
	&__content{
		border: 1px solid $primary-blue;
		height: 30px;
		font-weight: bolder;
		width: 100%;
        display:grid;
        grid-template: "text icon";
        grid-template-columns: 1fr 3rem;
		border-radius: 0.33rem;
		background: $inputs-bcg;
        cursor: pointer;
        &_text{
			margin: auto 0 auto 1rem;
			overflow: hidden;
    		text-overflow: ellipsis;
        }
        &_icon{
            margin: auto 0 auto 1rem;
			font-size: 16px;
			color:$primary-blue;
		}
		&_isOpen{
			border-radius:3px 3px 0 0;
		}
	}
	&__options{
        display: none;
		max-height: 15rem;
		height: auto;
        position: absolute;
        width: 99.9%; 
		z-index : 6;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        &_item{
			background: white;
			height:30px;
			font-weight: bolder;
			align-items:center;
			padding-left: 1rem;
            display: grid;
            &:hover{
                color:$alerts-blue;
                cursor: pointer;
			}
        }
		.selected{
					color: $primary-blue;
		}
        &_active{
			display:block;
		}
    }
	&__disable{
		.select{
			&__content{
				background: $alerts-default;
				color: $alerts-darker-default;
				border-color: $alerts-darker-default;
				&_icon{
				color:$alerts-darker-default;
				}
			}
		}
	}
	&__error{
		.select{
			&__content{
				border-color: $alerts-red;
				&_icon{
				color:$alerts-red;
				}
			}
		}
	}
}

Ha bah ça explique alors... l'overflow ne casse pas le z-index, il limite juste l'affichage du contenu aux limites du parent. La div a bien un z-index de 6 mais ne peut pas s'afficher en dehors du parent... Sur un select natif il n'y a pas ce problème.

Il y a t'il un moyen de contourner tout ça ?

lui mettre un position absolute ?

la position absolute ne peut pas passer outre l'overflow d'un parent.

Il faudrait que ton footer soit à l'interieur du body (à l'intérieur du overflow, fixé en bottom:0; et en position: absolute ou sticky si il y a du scroll). Le select pourra passer devant le footer mais tu auras le même soucis avec le bord du body...

Le mieux en fait c'est de garder un select natif ou de virer l'overflow

pacsys a écrit :
J'ai viré l'overflow c'ets nickel.

Heu.... mais c'est ce que tu as fait en tout premier pour voir que ca marchait bien sans pourquoi tu ne l'as pas directement enlevé du coup ?? Perso je pensais que tu voulais le garder pour des question de responsive, de contenu variable ou autre...

mais bon si ton problème est résolu