关于利用position定位在页面正中心的问题(还有一个z-index的知识点)
2017-05-03 22:40
274 查看
扯点没有用的:
今天做项目的时候,突然发现了一个问题:position定位还没有完全掌握。为什么这么说呢?因为今天我想把一个登录框不依靠js居中于整个页面,我没有任何思路。
切入正题:
关于position定位,有个很重要的点:定位定的只是一个框框的左上角。当我们用了position:absolute之后,这个框框就具备的绝对定位的能力。
如果我们用了left:50% top:50%后,其实这个框框的左上角的点已经在屏幕的正中心了。但是此时,也仅仅是左上角的点在屏幕的正中心。而我们要的是框框在正中心。这该怎么做到呢?
其实思路很简单:
①我们先看一下这个框框的宽和高,如果没有的话就自己设置一个。
②向左移动这个框框的半个宽的长度
③向上移动这个框框的半个高的长度
你会发现:此时,框框正中心的点已经在了页面的正中心。也就是框框处在了页面的正中心位置。
下面附图一张:
------------------------------------------------------------------分割线-----------------------------------------------------------
控制堆叠顺序的属性:z-index
在使用z-index属性之前,一定要注意:z-index只能使用在 定位元素 上使用,即position:absolute;z轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数,则离用户更远。
相关文章推荐
- 利用定位解决一个HTML页面奇怪的布局兼容性问题
- 关于ie 对position定位后的z-index问题
- 关于easyUI 的tabs 在子页面增加显示tabs的一个问题
- phonegap - 解决ios中使用定位的页面会跳出一个用户确认提示的问题
- 记录一个关于在event receiver中执行页面跳转的问题
- 关于shtml页面include问题解决方案因为utf-8的BOM头引起的出现一个空行
- 关于页面传值的一个问题
- 问一个关于生成静态页面的问题
- 问题:关于贴友的一个书本页面简单布局(html+css)的实现
- 关于PHP的一个坑爹问题(页面刷新)
- 关于在一个页面中包含15个几以上flash mp3 players时,在非IE下播放不正常的问题和解决方案
- 有关一个 iframe 的问题,关于在 iframe 内的页面内登录成功后,如何由当前页直接转到另一个页面内?
- CSS中关于定位position的问题,blockquote,div,span三个的区别
- 一个关于在页面写javaScript传值的问题
- 关于一个页面的tab切换整体页面刷新而tab标签处是同一个文件怎么做焦点的问题
- html页面中关于一个table表格中设置上下2个td宽度一致的问题
- 关于证书布置好了出现“无法将这个证书验证到一个受信任的证书颁发机构”及页面内容混搭问题
- 关于页面定位问题的几个经验
- 关于position(续)-z-index定位
- 关于页面局部定位刷新问题解决