关于利用position定位在页面正中心的问题(还有一个z-index的知识点)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CallMeQiuqiuqiu/article/details/71155994

扯点没有用的:

今天做项目的时候,突然发现了一个问题:position定位还没有完全掌握。

为什么这么说呢?因为今天我想把一个登录框不依靠js居中于整个页面,我没有任何思路。

切入正题:

关于position定位,有个很重要的点:定位定的只是一个框框的左上角

当我们用了position:absolute之后,这个框框就具备的绝对定位的能力。

如果我们用了left:50% top:50%后,其实这个框框的左上角的点已经在屏幕的正中心了。但是此时,也仅仅是左上角的点在屏幕的正中心。而我们要的是框框在正中心。这该怎么做到呢?




其实思路很简单:

①我们先看一下这个框框的宽和高,如果没有的话就自己设置一个。
②向左移动这个框框的半个宽的长度
③向上移动这个框框的半个高的长度

你会发现:此时,框框正中心的点已经在了页面的正中心。也就是框框处在了页面的正中心位置。

下面附图一张:




------------------------------------------------------------------分割线-----------------------------------------------------------

控制堆叠顺序的属性:z-index


在使用z-index属性之前,一定要注意:z-index只能使用在 定位元素 上使用,即position:absolute;

z轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数,则离用户更远。







没有更多推荐了,返回首页