������Ŀ�� �� ����� �� ��ǩҳ �� �ڵ�������ͼ���� ���� ��Ϊ��ʮ��ȫջ�������Ρ��Ŀ�����Աֱ�ӽ� ��Ϊ�� �����־�Ȼ����Ч��Ȼ���˷���һ������ʱ��Ž������¼����һЩ��������⡣

�������������������϶��������㼶��

��һ�����鿴�²㣺��ǩҳ ���Ĵ�С������Ϊ��3

�ڶ������鿴�� �Ĵ�С������Ϊ��1030

����Ľ����

Ϊ ����� ��Ȼ�� �㼶Ϊ �� ��� �ڵ��ˣ�

����ǰ��z-indexԭ�����ֵԽ��Խ���ϲ㣬�����ڵ������Ծ��Ų��

���ҵ�ǰ�˼���֪ʶ�У���ӡ�� ����Ӱ�� �Ƿ���Ч�����ǰٶȲ����£��ܶ�������˵����Ӱ������ժ�����£�

z-index�������ڿ���Ԫ���ڲ���������е���ʾ˳�򡣵�z-index��������ʱ���������������¼���ԭ��û��ָ��Ԫ�صĶ�λ���ԣ�z-index����ֻ�Զ�λԪ�أ�position����ֵΪrelative��absolute��fixed�������á����Ԫ��û��ָ����λ���ԣ�z-index��������Ч����ˣ���Ҫȷ��Ԫ�ص�position��������ȷ���á� Ԫ�صĶ�λ����ֵ����ȷ�����Ԫ�صĶ�λ����ֵ���ò���ȷ��z-indexҲ������Ч�����磬���Ԫ�ص�position����ֵΪstatic��Ĭ��ֵ������z-index���Խ��������á���Ҫ��Ԫ�ص�position����ֵ����Ϊrelative��absolute��fixed�� Ԫ�صIJ�������IJ���ȷ��ÿ����������Ķ����Լ��IJ��ˮƽ��z-indexֻ��ͬһ����������в������塣���Ԫ�ص�z-index����û������ȷ�IJ�������������ã������޷�Ӱ����������������е�Ԫ�ء�����ͨ�����ø�Ԫ�ص�position����ֵΪrelative��absolute��fixed�������µIJ�������ġ� Ԫ�ص�z-indexֵ����ȷ��������Ԫ�ض����ж�λ����������ͬһ��������ģ���ôz-indexֵ�ϴ��Ԫ�ؽ�����z-indexֵ��С��Ԫ�ء���ˣ���Ҫȷ������Ԫ�ص�z-indexֵ�ϴ��ܽ�������Ҫʹz-index��Ч����Ҫȷ��Ԫ�ؾ�����ȷ�Ķ�λ���ԣ�relative��absolute��fixed��������ȷ�IJ���������У����Ҿ��нϴ��z-indexֵ�������Ȼ�޷����z-index�������õ����⣬������Ҫ�������CSS���Ի�JavaScript�����Ƿ��Ԫ�ص���ʾ˳�������Ӱ�졣

���ǰ������ĸ��ķ��������޸� ���ԣ����ֲ�δ��Ч����ʱ4Сʱ��

�������������ᵽ ���������(Stacking Context)����ͻȻ������ˣ���Ϊ����ӡ�� ������һ���㼶�ڵģ�����ͼ��

��ɫȦΪ��Ӧ������������Dz�����һ�� html��Ԫ���У����Ըо�������

3.1��z-index�����������ʲô��

MDN�ٷ����ٶ��û���������������Ӵ�����ҳ�� HTML Ԫ��������������û���һ���鹹�� z ���ſ�����������ľ��Ƕ���Щ HTML Ԫ�ص�һ����ά���롣

The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.

ÿ����ҳ����һ��Ĭ�ϵIJ�������ģ������������ĵĸ�Ԫ�ؾ���htmlԪ�ء�html��ǩ�е�һ�ж����������Ĭ�ϵIJ�������ĵ�һ��������ϣ�body������һ��Ԫ�ش���һ�����������ʱ������������Ԫ�ض����ܵ���Ԫ�صIJ��˳��Ӱ�졣����ζ�����һ�����������λ��һ�����λ�õIJ㣬��ô����Ԫ�ص�z-index���õ��ٴ���������������������������Ԫ�ص����档

3.2�����ˮƽ����˳��

�����ˮƽ����Ӣ�ij�����stacking level������ͬһ����������еIJ�ͬԪ���ص�ʱ�����ǵ���ʾ˳�����ѭ���ˮƽ�Ĺ��򣬶�z-index�ܹ�Ӱ��Ԫ�صIJ��ˮƽ��

讯享网

�ص㣺������Ԫ�ػ��ڲ��ˮƽ��������ʱ���������ڵ�������������ڵġ����ˮƽ������z-index���ԣ����е�Ԫ�ض����ڲ��ˮƽ����z-index����ֻ�ܸı䶨λԪ�ؼ�flex���ӵĺ���Ԫ�صIJ��ˮƽ��

����˵˵���˳�򡣡����˳�򡱣�Ӣ����Ϊ��stacking order������ʾԪ�ط������ʱ�������ض��Ĵ�ֱ��ʾ˳��������Ҫע�⣬�������������ĺͲ��ˮƽ�Ǹ����������ｲ�������˳�����ǹ�����

��һ������������а��ղ��˳���Ԫ�ط�Ϊ7�ֲ��ˮƽ��Ĭ�ϵIJ��˳������ͼ��ʾ��

�������£�

��ƽʱ����ʱ�����Ǿ�����ʹ�ã�2������6������7�����󲿷�Ԫ�صIJ��ˮƽ������z-indexΪ0�Ķ�λԪ�ء�

Ϊʲôinline/inline-blockԪ�صIJ��˳��ȸ���Ԫ�غͿ�Ԫ�ض����أ�

��Ϊ��border/backgroundһ��Ϊװ�����ԣ��������Ϳ�Ԫ��һ���������֣�����Ԫ�ض������ݡ���ҳ��չʾ����Ҫ�������ݣ�������ݵIJ��˳��Ƚϸߣ����������ʱ����Ҫ�����ֺ�ͼƬ���������ȱ�¶����Ļ�ϣ�����ͼ����

����z-index�������Ժ����������ˣ���Ϊ�ҵ������� ������һ���㼶�ڵģ����Լ�ʹΪ ��������� �㼶Ϊ �� �������Ȼ���ڵ���

����Ŀ�궨λ�IJ㼶�Ϳ����ˣ��鿴���� Ant desgin vue �� �ٷ��ĵ����и����ԣ����õ����������������������Ϊ���� body���ɣ��������£�

�����ַ��

���������������㼶���ˣ�Ȼ�����������㼶ͼ���£�

�������5Сʱ!

һ��Ҫ��ע��������ģ�Stacking Context�����������ˮƽ��Stacking Level������˳��Stacking Order������Ҫ��ע������Ч��

����ʹ�ü����ܽ�����:

����ע�����

һ��ʮ��ȫջ���������˷�������ʱ���8Сʱ��ҲӦ���Ǿ仰����ϣ�д���ϡ���