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


相关推荐

  • 安卓适配AutoSize详解

    安卓适配AutoSize详解GItHub的官方地址:https://gitee.com/lcb1992/AndroidAutoSize一.项目导入implementation’me.jessyan:autosize:1.2.1’1.1manifest里面进行设置<manifest><application><meta-dataandroid:name=”design_width_in_dp”

    2022年6月6日
    28
  • PhpStorm-2021.3.2 激活码破解方法

    PhpStorm-2021.3.2 激活码破解方法,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月15日
    88
  • 项目管理知识体系五大过程组(项目管理10大知识领域)

    信息系统项目管理师属于计算机技术与软件专业技术资格(水平)考试五大高级资格考试中的一项,是信息系统建设领域的高级项目经理资质申报的直接性前提条件。通过本考试的合格人员能够掌握信息系统项目管理的知识体系,具有高级工程师的实际工作能力和业务水平。通过本考试的基本用途有以下2个:1、评职称:此证书在国企和事业单位可以评职称。2、申报项目经理:此证书可在自己所在企业申报系统集成项目经理,如果…

    2022年4月11日
    98
  • 蓝桥杯单片机的P2 = (P2 & 0x1f) | 0x80

    蓝桥杯单片机的P2 = (P2 & 0x1f) | 0x80蓝桥杯单片机的P2=(P2&0x1f)|0x80声明作者并不是一个老手,可能在某些专业词语描述上有错误,或者其他,如有错误,还请指正。背景自己之前在学习蓝桥杯单片机的时候,在学习锁存器控制IO口点亮流水灯led的时候,就看到了视频中的P2=(P2&0x1f)|0x80,但是当时视频的老师只是说你们自己理解一下,然后我找了找csdn,是没有找到的,所以决定写一下,其实是很简单的东西基础小知识1.二进制转换首先我们先说一下P2,想想看,刚开始的P2的各个引脚

    2025年11月5日
    3
  • SSM-Mybatis(3)[通俗易懂]

    SSM-Mybatis(3)[通俗易懂]复杂的sql查询环境搭建CREATE TABLE `teacher` ( `id` INT(10) NOT NULL, `name` VARCHAR(30) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=INNODB DEFAULT CHARSET=utf8INSERT INTO teacher(id, name) VALUES (1,’秦老师’); CREATE TABLE `student` ( `id` INT(10) NOT NULL

    2022年8月8日
    6
  • 用js来实现那些数据结构09(集合01-集合的实现)

    说到集合,第一个想到的就是中学学到的那个数学概念:集合。在我们开始集合相关的js实现前,我们有必要来了解一下什么是集合以及集合的数学概念。好吧,我们一起来复习一下早就被我们遗忘的集合。集合是由一组

    2022年3月25日
    40

发表回复

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

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