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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MyBatis-Plus 如何实现连表查询[通俗易懂]

    MyBatis-Plus 如何实现连表查询[通俗易懂]MyBatis-Plus如何实现连表查询安装使用简单的3表查询分页查询还可以这么操作,但不建议骚操作简单的3表查询分页查询项目地址:giteegithub安装在项目中添加依赖,依赖已经包含了mybatis-plus-boot-starter<3.4.2>依赖后无需再次引入mybatis-plus<dependency><groupId>com.github.yulichang</groupId><artifactI

    2025年11月14日
    3
  • php7 502 bad gateway,502 bad gateway怎么解决

    php7 502 bad gateway,502 bad gateway怎么解决502BadGateway错误是HTTP状态代码,表示Internet上的一台服务器收到来自另一台服务器的无效响应。在前面的文章中,已经给大家详细介绍了502badgateway是什么意思以及出现这种错误的一些原因总结。那么我们怎么解决502badgateway错误?502BadGateway错误通常是互联网上服务器之间的网络错误,也或者因为您的计算机或互联网连接出现问题。所以我们…

    2022年6月24日
    33
  • redis锁实现_IDEA使用try

    redis锁实现_IDEA使用tryWeb全栈~35.显式锁上一期接口Lock显式锁接口的定义       lock()/unlock():就是普通的获取锁和释放锁方法,lock()会阻塞直到成功。       lockInterruptibly():与lock()的不同是,它可以响应中断,如果被其他线程中断了,则抛出InterruptedException。  &nbsp

    2022年10月15日
    5
  • 大数据:数据采集平台之Apache Chukwa「建议收藏」

    大数据:数据采集平台之Apache Chukwa「建议收藏」大数据:数据采集平台之ApacheChukwa官网:https://chukwa.apache.org/ApacheChukwa是Apache旗下除ApacheFlume外,又一个开源的数据收集平台。Chukwa基于Hadoop的HDFS和MapReduce来构建(显而易见,它用Java来实现),提供扩展性和可靠性。Chukwa同时提供对数据的展示,分析和监视。该项目已经不活跃了,它…

    2022年5月29日
    32
  • 日本の行政区画–都道府県

    日本の行政区画–都道府県中国の行政区画–省市自治区に類似して、日本の行政区画は都道府県(とどうふけん)である。全部で一都、一道、二府と43県がある。一都(いっと)とは東京都で、日本の政治、経済、文化などの中心である。一道(いちどう)は北海道で、開発が他の土地より遅い。二府(にふ)は、京都府と大阪府で、関西の主な部分で、歴史と経済の面で非常に重要な地区である。日本の県は中国の省に当たり(面積はずっと狭いが)、全部で43県

    2022年7月11日
    30
  • android 点餐系统「建议收藏」

    android 点餐系统「建议收藏」      最近进入一家新公司,这家公司是做手机软件开发的。现在自己是试习期,主要任务是看书。看了有一个月了实在是无聊,就想做个手机软件来玩玩。想到之前看到一篇报道,台湾有家餐饮公司用IPAD给客户自助点餐。我就想再android系统上做一下。想了也有一个多星期了,准备开始开工了。     系统主要是四个模块。顾客端,系统管理端,厨师端,数据库端。它们的主要流程如下:     其他的系统分析

    2022年6月19日
    48

发表回复

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

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