HTML基础学习之 --元素 定位
来源:互联网 发布:linux 守护进程启动 编辑:程序博客网 时间:2024/05/16 08:49
元素定位
一、 定位主要包括了以下四种方式:
1. static:默认值,无特殊定位,对象遵循HTML原则;
2. relative: 相对定位,对象不可层叠,将依据 right,top,left,bottom(相对定位)等属性在正常文档流中偏移位置。(相对自身、不脱离文档流)
3. absolute:绝对定位,将对象从文档流中脱离出来,使用 left / right / top / bottom 等属性相对其最接近的一个并有定位设置的父元素进行
定位;如果不存在这样的父对象 则依据html对象(根元素),而其层叠通过z-index属性定义;(脱离文档流 相对于html)
4. fixed: (固定定位)未支持 对象定位遵从绝对定位方式(absolute);但是要遵守一些规范。(脱离文档流 相对于窗口)
二、包含块
包含块是绝对定位的基础,包含块就是为决定定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考; 默认状态下,html是一个大的包含块,所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小显示的,如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块:给绝对定位元素的父元素添加声明:position:relative;
三、绝对定位和相对定位的区别
1.参照物不同 绝对定位的参照物是包含块 相对定位的参照物是元素本身的位置。
2.绝对定位将对象从文档流中脱离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。
四、定位元素层叠属性
z-index : auto | (默认为0)
检索或设置对象的层叠顺序。
Auto : 默认值
Number:无单位的整数值,可为负数。
说明:
1)、较大number值的对象会覆盖在较小number值得对象之上。如果number相同 那么将依据他们在html文档中声明的顺序层叠。
2)、这个属性不会作用于窗口控件,如select
五、命名锚点链接的应用:
超级链接的一种,又叫命名锚记。命名锚记就像一个迅速定位器一样是一种页面内的超级链接。
1)、命名锚点的作用:在同一页面内的不同位置进行跳转。
2)、给元素定义命名锚记名
语法:<标记 id=”命名锚记名”> </>
3)、命名锚记链接
语法:<a href=”#命名锚记名称”></a>
- HTML基础学习之 --元素 定位
- CSS学习之 元素定位
- 学习笔记:Html浮动元素的定位
- selenium之HTML元素无法定位
- HTML元素定位
- html中元素定位
- HTML元素坐标定位
- HTML元素坐标定位
- HTML+CSS基础课程之元素分类
- 六、HTML基础之添加多媒体元素
- 前端基础之三HTML元素分类
- HTML&CSS基础篇之二:HTML应用定位
- CSS基础学习10-CSS设置元素的定位
- 元素定位之相对定位
- Appium基础篇7-元素定位之by_android_uiautomator
- Appium基础篇8-元素定位之by_class_name
- Appium基础篇9-元素定位之by_xpath
- Appium基础篇10-元素定位之by_accessibility_id
- 文件的下载与上传
- Criteria 和 DetachedCriteria 的区别
- 也谈大端小端
- Android要学的
- Criteria 和 DetachedCriteria 的区别
- HTML基础学习之 --元素 定位
- 技术、设计常用网站收集
- NO_DATA_FOUND 和 %NOTFOUND的区别
- VS 常用快捷键
- LCS最长公共子序列java版
- Java中应用Collections工具类的Sort()方法对List进行排序
- 启动tomcat报错 java.lang.Exception: Socket bind failed
- Retrofit2.0使用
- [C++]高效使用迭代器的一些建议