CSS定位网页中的元素
relative相对定位
偏移设置:left、right、top、bottom 值单位:px
元素的规律:
相对定位元素的规律
设置相对定位的盒子会相对它原来的位置通过指定偏移,到达新的位置。
设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来
特性:
相对于自己的初始位置来定位
元素位置发生偏移后,他原来的位置会被保留下来
层级提高,可以把标准文档流中的元素及浮动元素盖下边
使用场景:
相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量。
absolute绝对定位
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。
如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离,这意味着他们对其他元素的定位不会造成影响。
元素位置发生偏移后,他原来的位置不会被保留下来
特性:
绝对定位是相对定位父级的位置来定位,如果没有设置定位父级,则相对浏览器窗口来定位。
元素位置发生偏移后,原来的位置不会被保留
层级提高,可以把标准文档流中的元素及浮动元素盖在下边
设置绝对定位的元素脱离文档流
使用场景:
一般情况下,绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景。
fixed属性值
偏移设置:left、right、top、bottom 值单位:px
类似绝对定位,不过区别在于定位的基准不是祖先元素,而是浏览器窗口
z-index属性
调整元素定位时重叠层的上下位置
z-index属性值:整数,默认值为0
设置了position属性时,z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
网页元素透明度
属性:
opaction filter
opaction:x; x值[0 ,1],值越小越透明
filter:alpha(opacity=x); x值[0 ,100],值越小越透明
转载于:https://www.cnblogs.com/cosmosray/p/7562278.html
CSS定位网页中的元素相关推荐
- 精确定位网页中各个元素的位置
精确定位网页中各个元素的位置有两种方法:使用表格或层.使用表格是目前比较通用的做法,具体方法是:先在网页中建立一个表格,注意表格的边框宽度应为0.然后再把各个元素按照你的要求放在各个表格单元之中.仔细 ...
- C#获取网页中某个元素的位置,并模拟点击
我们在开发中,往往要得到网页中某个元素的位置,并且点击它.要模拟一次鼠标点击并不难,只要调用一个API就行了,关键就是怎么样得到这个元素的位置,还有判断是否要滚动滚动条,要滚动多少行能让元素显示出来. ...
- VC6中用DOM遍历网页中的元素
VC6中用DOM遍历网页中的元素 2005-4-21 6:56:47 作者:模板天下收集整理 来源:未知 网友评论 0 条 论坛286 一.摘要 在我们编写的程序中,如果想要实现对浏览器打开的网页进行 ...
- html一般用那种方式定位,使用三种方式定位html中的元素
使用三种方式定位html中的元素 发布时间:2020-06-06 14:46:00 来源:51CTO 阅读:687 作者:知止内明 1)使用三种方式定位html中的元素 a)通过ID $(" ...
- VC 监视网页中的元素事件
通过近两个月的学习<Internet Explorer 5.0程序设计>,我终于知道该怎样来挂接一个网页中各元素的事件,现将我解决方法告知如下: 本例利用C++来捕获IE网页中的元素事件. ...
- java 获取js html_JS获取网页中HTML元素的几种方法
编写js程序的时候最常使用的就是获取网页中的html元素,并进行处理,我在网上发现了一篇获取html对象的几种方法进行整理的帖子,发上来大家一块学习~ getElementById getElemen ...
- 网页中审查元素(按F12)与查看网页源代码的区别
在网页中右键,如图: 所谓查看源代码,就是别人服务器发送到浏览器的原封不动的代码. 审查元素时,你看到那些,在源代码中找不到的代码,是在浏览器执行js动态生成的. 通过审查元素看到的就是最终的html ...
- 快速定位网页中元素在源代码中的位置
目录 一.打开目标网页,按F12 二.点击如图红圈的图标 因为自动化测试工作的需要,要根据元素id或者name来定位,这就需要查看网页源代码,但是一些前端页面代码量庞大,有很多是不需要看的,只需要找准 ...
- python获取网页元素坐标_Python实战爬虫系统学习笔记一:解析网页中的元素
学习python编写爬虫第一天,学会如何解析本地网页 第1步:使用用Beautiful Soup解析网页 Soup = BeautifulSoup(wb_data,'lxml') 第2步:描述爬取信息 ...
最新文章
- 【二分答案】【最短路】bzoj1614 [Usaco2007 Jan]Telephone Lines架设电话线
- delphi处理消息的几种方式
- Swarm 如何实现 Failover?- 每天5分钟玩转 Docker 容器技术(98)
- SQL 数据库 存储过程 视图
- Objective-C单例实现
- jmeter 核心_初识性能测试工具JMeter
- hibernate中createQuery和createSqlQuery
- RabbitMQ如何解决被重复消费和数据丢失的问题?
- 【现代机器人学】名词概念的理解
- IBM Lotus Domino V8.5 服务器管理入门手册
- 竖屏小游戏--喵星战争源代码分析【完整】
- 解决升级到Android Studio 3 Beta版本编译异常
- Json转对象 调用toBean
- 武汉大学计算机学院csc,2018年春武汉大学CSC公派出国留学录取名单
- uniapp简单的登录页面布局
- 无损压缩算法专题——无损压缩算法介绍
- 另辟蹊径,挑战网络战争
- UVM RAL 中的显示预测 uvm_reg_predictor
- 灭霸只是开始 看数字王国的虚拟版图
- 机器人动力学 - 机器人学中的惯性矩阵坐标转换及在SolidWorks中的测量