28182 sujets

CSS et mise en forme, CSS3

[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 :
upload/1568280306-71432-annotation2019-09-12112135.jpg

Exemple sans overflow :

upload/1568280354-71432-sansoverflow.jpg
Modifié par pacsys (12 Sep 2019 - 11:27)
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;
				}
			}
		}
	}
}
Modérateur
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.
Modérateur
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 Smiley lol
Modérateur
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 Smiley biggol 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 Smiley sweatdrop
Sujet clos
Aller à