css中position与z-index

position属性在css中,position属性用来控制元素的位置信息,其取值共有4种,即static、relative、absolute、fixed。静态定位(static)若没有指定posit

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

全栈程序员社区此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

position属性

在css中,position属性用来控制元素的位置信息,其取值共有4种,即static、relative、absolute、fixed。

静态定位(static)

若没有指定position属性,则默认的position属性值为static,则所有poition属性值为static的对象将按照你所编写html标签的顺序依次呈现。

css中position与z-index

相对定位(relative)

该属性值仍然保持对象所在文档流的位置,即它与static所呈现的次序相同,与static属性不同的是,它可以通过top,left,right,bottom属性设定自己的新显示位置,这四个属性值是相对于该对象原来所在的位置

css中position与z-index

绝对定位(absolute)

与relative定位不同的是,该属性值会将当前对象脱出文档流,后面的对象占有该对象原来所在的位置;与relative定位相似的是,他可以通过top,left,right,bottom属性重新设定自己的新位置,但该属性的取值不是相对于其最近的一个position值不为static的祖先元素的位置

css中position与z-index

固定定位(fixed)

固定定位与绝对定位很相似,它同样会使得当前对象脱出文档流,也可以通过top,left,right,bottom属性重设自己的新位置,但是该属性的取值是相对于浏览器窗口,就如”fixed”的含义一样,是钉在窗口中的某一处,其位置固定,不会随着滚动条的拖动而发生改变。

z-index属性

如果说一个平面是由x轴和y轴所构成的一个平面,那么一个html页面就可以看成是一个由x轴、y轴和z轴所组成的一个页面,如图所示:

css中position与z-index

 

其中z-index所表示的就是该页面中元素在z轴上的高度,如图A元素的z-index值就比B元素的z-index值要大。但如果要体现z-index的效果也是有条件的,就是该元素的position值不为static(即为absolute、relative或fixed)。

http://www.cnblogs.com/roucheng/

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120699.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • navicat生产激活码失败【中文破解版】

    (navicat生产激活码失败)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年4月1日
    203
  • springboot+idea热部署(自动刷新)

    springboot+idea热部署(自动刷新)近来在使用idea做springboot的项目,但是发现每次修改之后我都需要重新将项目关闭再开启,这样比较繁琐,发现通过热部署的方式让我们可以一边修改我们的项目,然后在页面中直接通过刷新展示出来spring为开发者提供了一个名为spring-boot-devtools的模块来使SpringBoot应用支持热部署,提高开发者的开发效率,无需手动重启SpringBoot应用。devtool…

    2022年6月26日
    48
  • javascript全局变量失效

    javascript全局变量失效问题:我在js文件中定义了一个全局变量:vara,在函数B()中给a赋值,然后在函数C()中访问a结果发现a居然是undefined找原因:查了不少资料感觉和我的情况都不同,仔细分析了一下,发现了一些端倪:我的操作是这样的,我在A页面中加了iframe,iframe的地址是B,我在A页面中调用了B()函数,然后又在B页面中调用了C()函数。问题就出在这了,javascript的全…

    2022年6月13日
    81
  • Nacos整合SpringCloud(配置中心、注册中心)[通俗易懂]

    Nacos整合SpringCloud(配置中心、注册中心)[通俗易懂]1.什么是Nacos?Nacos是阿里巴巴开源的一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。2.Nacos配置中心整合2.1启动NacosServer并添加配置1.下载地址:直接下载:NacosServer下载页源码构建:Github项目页面2.启动Linux/Unix/Mac操作系统,执行命令shstartup.sh-ms…

    2022年6月6日
    52
  • Linux安装gcc的四种方法「建议收藏」

    Linux安装gcc的四种方法「建议收藏」相比于windows系统,Linux安装程序就比较复杂了,很多需要root用户才能安装。常见的有以下几种安装方法 源码安装 rpm包安装 yum安装(RedHat、CentOS) apt-get安装(debian,ubuntu) 源码安装以安装gcc为例,登陆https://gcc.gnu.org/,下载自己想要的版本的gcc安装包上传gcc-4.1.2.tar.gz到Linux服务器任意目录,解压解压目录执行shell命令./configurat.

    2022年5月26日
    89
  • 51单片机IIC通信协议

    51单片机IIC通信协议/*——————————————————————————*@fileI2C.H*@authorByron(from3900@gmail.com)*@versionV1.0.0*@date05/12/2020*@brief51系列单片机I2C通信协议头文件*——————————————-

    2022年6月5日
    39

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号