第八章定位网页元素

一，定位

position属性有以下属性值：

static：默认值，没有定位

relative：相对定位

absolute：绝对定位

fixed：固定定位

1.static

当我们没有设置，或者设置为static的时候，会以标准文档流的形式排列。

2.relative

relative属性值：

相对自身原来位置进行偏移

偏移设置：top、left、right、bottom

示例：

#third {background-color:#C5DECC;border:1px #395E4F dashed;position:relative;right:20px;bottom:30px;
}

相对定位元素的规律:

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置

设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响

设置相对定位的盒子原来的位置会被保留下来

补充：偏移量方向

3. absolute

绝对定位的使用和相对差不多，但是有不同的规律。

absolute属性值:

偏移设置： left、right、top、bottom 。（正负取值方向和相对定位一致）

示例：

#second {background-color:#CCF;border:1px #0000A8 dashed;position:absolute;right:30px;
}

绝对定位规律：

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移

如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位

绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

元素位置发生偏移后，它原来的位置不会被保留下来

设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。

在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况

4. fixed

fixed属性值:

偏移设置： left、right、top、bottom

固定定位类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口。他会随着下拉跟随窗口移动。

5.定位小结

1.相对定位：

相对定位的特性:

相对于自己的初始位置来定位

元素位置发生偏移后，它原来的位置会被保留下来

层级提高，可以把标准文档流中的元素及浮动元素盖在下边

相对定位的使用场景:

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

2.绝对定位：

绝对定位的特性

绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位

元素位置发生偏移后，原来的位置不会被保留

层级提高，可以把标准文档流中的元素及浮动元素盖在下边

设置绝对定位的元素脱离文档流

绝对定位的使用场景:

一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

3.固定定位

固定定位的特性:

相对浏览器窗口来定位

偏移量不会随滚动条的移动而移动

固定定位的使用场景:

一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

二，z-index和透明度

1.z-index

调整元素定位时重叠层的上下位置:

z-index属性值：整数，默认值为0

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

2.网页元素透明度

我们学完z-index和透明度，我们就可以做出来下图效果：

3.小结

网页中的元素都含有两个堆叠层级:

未设置绝对定位时所处的环境，z-index是0

设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定

改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可

三，总结

页中的元素都含有两个堆叠层级:

未设置绝对定位时所处的环境，z-index是0

设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定

改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可

三，总结

第八章定位网页元素相关推荐

html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素
----8 定位网页元素---- 51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置. (1)static 默认无定位,元素按照标准文档布局. (2)relative相对 ...
seleniumpython定位网页元素方法_使用Selenium对网页元素进行定位的诸种方法
使用Selenium进行自动化操作,首先要做的就是通过webdriver的get()方法打开一个URL链接. 在打开链接,完成页面加载之后,就可以通过Selenium提供的接口,在页面上进行各种操作了 ...
seleniumpython定位网页元素方法_Python+Selenium 定位元素
1.摘取网页上所有邮箱练习场景:在某一个网页上有些字段是我们感兴趣的,我们希望摘取出来,进行其他操作.但是这些字段可能在一个网页的不同地方.例如,我们需要在关于百度页面-联系我们,摘取全部的邮箱. ...
（干货）你知道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(" ...

第八章定位网页元素

第八章定位网页元素

一，定位

1.static

2.relative

补充：偏移量方向

3. absolute

4. fixed

5.定位小结

二，z-index和透明度

1.z-index

2.网页元素透明度

3.小结

三，总结

三，总结

第八章定位网页元素相关推荐

最新文章

热门文章

第八章 定位网页元素

第八章 定位网页元素

一，定位

1.static

2.relative

补充：偏移量方向

3. absolute

4. fixed

5.定位小结

二，z-index和透明度

1.z-index

2.网页元素透明度

3.小结

三，总结

三，总结

第八章 定位网页元素相关推荐

最新文章

热门文章

第八章定位网页元素

第八章定位网页元素

第八章定位网页元素相关推荐