HTML-定位网页元素
定位
定位在网页中的应用
position属性
1. static:默认值,没有定位
2. relative:相对定位
相对自身原来位置进行偏移:偏移设置:top、left、right、bottom
相对定位元素的规律
1.设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置
2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响
3.设置相对定位的盒子原来的位置会被保留下来
浮动元素设置相对定位
先设置第二个盒子右浮动,再设置第一、第二盒子相对定位
3. absolute:绝对定位
absolute属性值:偏移设置: left、right、top、bottom
绝对定位小结:
1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
2.如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位
3.绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
4.元素位置发生偏移后,它原来的位置不会被保留下来
绝对定位不设置偏移量
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况
4. fixed:固定定位
fixed属性值:偏移设置: left、right、top、bottom
类似绝对定位,不过区别在于定位的基准不是祖先元素,而是浏览器窗口
div:nth-of-type(1) { /*第一个div设置绝对定位*/width: 100px;height: 100px;background: red;position: absolute;right: 0;bottom: 0;}
div:nth-of-type(2) { /*第二个div设置固定定位*/width: 50px;height: 50px;background: yellow;position: fixed;right: 0;bottom: 0;
}
body{height: 1000px;}
此时:滑动滚动条,红色块会向上走,黄色块不动;因为红的块是绝对定位,它所谓的相对于浏览器窗口来进行定位,是在一屏之内,超过一屏就不是那个地方了;而黄色的块是固定定位,一直都是浏览器的固定位置,超过一屏之后还是那个地方
定位小结
一、相对定位的特性:
1.相对于自己的初始位置来定位
2.元素位置发生偏移后,它原来的位置会被保留下来
3.层级提高,可以把标准文档流中的元素及浮动元素盖在下边
二、相对定位的使用场景:
相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量
三、绝对定位的特性:
1.绝对定位是相对于它的定位父级的位置来定位,如果没有设置定位父级,则相对浏览器窗口来定位
2.元素位置发生偏移后,原来的位置不会被保留
3.层级提高,可以把标准文档流中的元素及浮动元素盖在下边
4.设置绝对定位的元素脱离文档流
四、绝对定位的使用场景
一般情况下,绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
五、固定定位的特性
1.相对浏览器窗口来定位
2.偏移量不会随滚动条的移动而移动
六、固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
z-index属性:
调整元素定位时重叠层的上下位置:
- z-index属性值:整数,默认值为0
- 设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系
- z-index值大的层位于其值小的层上方
网页元素透明度
小结
a.网页中的元素都含有两个堆叠层级
1.未设置绝对定位时所处的环境,z-index是0
2.设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定
b.改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序,只需调整绝对定位层的z-index值即可
HTML-定位网页元素相关推荐
- html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素
----8 定位网页元素---- 51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置. (1)static 默认无定位,元素按照标准文档布局. (2)relative相对 ...
- seleniumpython定位网页元素方法_使用Selenium对网页元素进行定位的诸种方法
使用Selenium进行自动化操作,首先要做的就是通过webdriver的get()方法打开一个URL链接. 在打开链接,完成页面加载之后,就可以通过Selenium提供的接口,在页面上进行各种操作了 ...
- seleniumpython定位网页元素方法_Python+Selenium 定位元素
1.摘取网页上所有邮箱 练习场景:在某一个网页上有些字段是我们感兴趣的,我们希望摘取出来,进行其他操作.但是这些字段可能在一个网页的不同地方.例如,我们需要在关于百度页面-联系我们,摘取全部的邮箱. ...
- 第八章 定位网页元素
第八章 定位网页元素 一,定位 position属性有以下属性值: static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位 1.static ...
- (干货)你知道python爬虫定位网页元素有几种方式嘛,今天带你一一了解。
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 以下文章来源于腾讯云 作者:拓荒者 ( 想要学习Python?Python学习交流 ...
- JavaScript:使用Xpath定位网页元素(含Iframe定位)
JavaScript:使用Xpath定位网页元素(含Iframe定位) 一.非Iframe内元素使用Xpath定位 二.Iframe内元素使用Xpath定位(非跨域Iframe) 三.实战案例(以获取 ...
- html网页定位,HTML_定位网页元素(示例代码)
一.position属性 意指:盒子的位置. 四个属性: 1.static:默认值,没有定位,元素按照标准文档流进行布局. 2.relative:相对定位,使用相对定位的盒子位置以标准文档流进行的排办 ...
- python网页元素定位_用Selenium进行网页元素定位以及常用的定位元素的方法
用Selenium进行网页元素定位 一.前提条件: 下载.安装Selenium 二.编写定位网页元素的脚本(这里以定位百度网页的元素举例) 1.新建文本文档(可以用任意的文本编辑器,我这里用的是Pyc ...
- python web自动化元素定位_快速掌握Python Selenium Web自动化:三)在Selenium中定位查找网页元素的诸类方法...
使用Selenium进行自动化操作,首先要做的就是通过webdriver的get()方法打开一个URL链接. 在打开链接,完成页面加载之后,就可以通过Selenium提供的接口,在页面上进行各种操作了 ...
- css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位 一 """ # #通过id # driver.find_element_by_css_selector(" ...
最新文章
- Oracle触发器(trigger):一般用法
- 进程和线程的概念、区别和联系
- IOS仿微信键盘快捷工具栏
- Linux网络编程(Socket)
- mysql技术分享-- 视图是什么
- android 9图片报错,Android2.1加载9Patch图片运行后报错
- vue 请求时方法执行顺序问题,异步请求无法同时处理多个接口,使用同步顺序执行:async/await使用
- 如何让网站文章秒收录
- Linux中的atim、mtime、ctime
- 2021-1-29Linux学习纪要
- 请不要再说NIO和多路复用IO是同一个东西了(内含BIO、NIO、多路复用、Netty、AIO案例测试代码)
- 无法打开coursera网站解决方案
- 百度地图多点路线规划_期待已久的多地点路线规划功能
- 如果矩阵中存在字符用C语言,面试中常见的数据结构与算法题整理,想当架构师,数据结构与算法不过关可不行(数组+字符串,共60题)...
- MacBook Pro无法开机的解法办法
- 基于Cortex-M7内核STM32F767NIH6,STM32F767VGT6,STM32F767VIT6嵌入式技术资料
- JAVA对象 到底是什么?
- 百度paddleOcr安装与使用
- JVM之枚举GC Roots 根节点,安全点,安全区域。
- 智慧医疗服务平台有哪些优势?