网页布局之定位元素在布局无法显示的问题

在进行网页布局时，为实现更完美的展示效果，通常会使用到定位和浮动这两种元素布局方法，但是有时会遇到这种情况--元素已经进行了定位，但是没办法看到定位的效果，但是使用查看元素去检查问题时，代码中的元素在网页中能够显示，只是被其他元素遮住了

出现这种情况，可以通过以下几种方式解决：

一、如果使用了子绝父相来进行定位，可以查看最近已经定位的父级元素有没有设置 overflow: hidden，如果有的话，溢出父级的元素会被隐藏，也就看不到效果了

解决方法：删除overflow或者找没有设置overflow的父级元素进行定位

二、注意元素显示的优先级，同级元素，写在后面的样式会覆盖前面的样式，定位也一样，绝对、相对、固定定位的优先级相同，在布局中，如果定位的元素位置跟后面的元素位置重叠的话，后面的元素会层叠覆盖前面的元素，导致在网页中可以使用检查元素查看到前面定位元素的位置，但是元素无法显示的问题

解决方法：可以给定位元素添加z-index属性，让该定位元素优先显示

参考链接：1. https://blog.csdn.net/micoria/article/details/113659838（绝对定位、固定定位、相对定位分别和浮动使用的影响）

2. https://blog.csdn.net/m0_63285774/article/details/121586954 (子绝父相 元素的显示与隐藏)

3. https://blog.csdn.net/qq_52232797/article/details/111301292 (浮动-float 和定位-position)