HTML_定位网页元素

一.position属性

意指:盒子的位置。

四个属性:

1.static:默认值,没有定位,元素按照标准文档流进行布局。

2.relative:相对定位,使用相对定位的盒子位置以标准文档流进行的排办方式为基础,然后使盒子相对于他原本的位置偏移指定的距离。相对定位的盒子仍然在标准文档流中,其后的盒子仍以标准文档流当是对待它。

3.absolute:绝对定位,盒子的位置以包含他的盒子为基准进行偏移。绝对定位的盒子从标准文档流中脱离。这意味着他们对其后的其他盒子的定位没有影响,对于其他的盒子来说就好像这个盒子不存在一样。

4.fixed:固定定位,他和绝对定位类似,只是以浏览器窗口为基础进行定位,也就是说当拖动浏览器窗口的滚动条时,依然保持对象位置不变。

……
<div id="father">
  <div id="fir">第一个盒子</div>
  <div id="sec">第二个盒子</div>
  <div id="thi">第三个盒子</div>
</div>
﹉﹉

  

div{
 margin:10px;
padding:5px;
line-height:25px;
}
#father{
 border:1px solid;
 padding:0px;
}
#fir{
nackground-color:#F2BB6F;
border:1px dashed;
}
……

  #设置相对定位元素的规律#

1)设置相对定位的盒子会相对他原来的位置,通过指定的位移,到达新的位置。

2)设置相对定位的盒子扔在标准文档中,他对父级盒子和相近的盒子都没有任何影响。

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

#绝对定位#

1)使用绝对定位的元素以他最近的一个“已定位”的“祖先”元素为基准进行偏移。如果没有已定位的祖先元素,那么以浏览器为基准进行定位。

2)绝对定位的元素从标准文档流中拖影,这意味着他们√其他元素的定位不会造成影响。

^O^相对定位的特性:

1)相对定位自己的初始位置来定位。

2)元素位置发生偏移后,他的原来位置会被保留下来。

3)层次提高,可以把标准文档流的元素及浮动元素盖在下面。

使用场景

1)相对定位一般情况很少单独用,都是配合绝对定位使用,为绝对定位创造父级而不是位置偏移。

^O^绝对定位的特性:

1)绝对定位相对他的定位父级的位置来定位的。

2)元素位置发生偏移后,他原来的位置不会被保留下来。

3)层次提高,可以把标准文档流中的元素及浮动元素盖在下面。

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

使用场景

1)一般情况下,绝对定位用在下拉菜单,焦点图轮播,跳出数字泡,特别等场景

二.z-index属性

用来解决覆盖的元素他们上下位置

z-index:(数字);

两个属性:

1.opacity:x    值为0~1

2.filter:alpha  值为0~100

由于浏览器的兼容,一般情况两个同时使用。

时间: 2024-10-08 20:00:30

HTML_定位网页元素的相关文章

第八章 定位网页元素

一.position属性定位网页元素 1.static :默认值,没有定位.按照标准文档流的方式提现出来 2.relative:相对定位,相对于自身元素原来的位置进行定位 <style type="text/css">     .div01{      position: relative;      top: -20px;      left: 20px;     } </style> 注意:当top的值为正值时向下移动       当为负值时向上移动 当le

Selenium 定位网页元素

第一 定位元素辅助工具 IE中在元素上右击 ->  “检查元素”,或按F12键打开开发者工具: Chrome中在元素上右击 -> “审查元素”,或按F12键打开开发者工具: Firefox中在元素上右击 -> “检查元素”,或安装插件Firebug打开开发者工具: http://getfirebug.com/ Firefox中可以安装xPathChecker通过xpath定位页面上元素. https://addons.mozilla.org/zh-CN/firefox/addon/xpa

定位网页元素

一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) 3.absolute:绝对定位 4.fixed:固定定位 二.相对定位元素的规律 1.设置相对定位的盒子会相对它原来的位置,通过指定偏移到达新的位置 2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻盒子都没有影响 三.绝对定位-- absolute属性 1.偏移位置:left right

定位网页元素(5)

1.元素定位(position) static:默认 relative:相对定位 absolute:绝对定位 flxed:固定定位(建议不要用,部分浏览器不兼容)2.层叠关系(z-index) 默认值为:0 值可以是任何整数 值越大,位置在越前面3.透明度 opacity:0~1值越小越透明 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

使用Selenium对网页元素进行定位的诸种方法

使用Selenium进行自动化操作,首先要做的就是通过webdriver的get()方法打开一个URL链接. 在打开链接,完成页面加载之后,就可以通过Selenium提供的接口,在页面上进行各种操作了,下面我们来了解一下如何在查找元素. 3.1 查找和定位网页元素 在上一篇的示例中,我们就演示了如何通过find_element_by_id()方法,根据元素的id值来定位页面元素. 除了根据元素的id值来查找元素外,Selenium还提供了很多查找元素的方法: 从上图中可以看到,Selenium提

S1/使用HTML语言和CSS开发商业站点/08-定位网页元素

在CSS中有3种基本的定位机制,分别是标准流.浮动和绝对定位.通常在网页中除非专门指定某种元素的定位,否则所有元素都在标准流中定位,也就是说标准流中元素的位置由在XHML中的位置决定. 在前面的章节已经学习了标准流和浮动,使用浮动的方式可以定位网页元素.但是仅使用浮动一种方式,完成不了网页中很多更为复杂的网页效果. Position属性 Position属性yufloat属性一样,都是CSS排版中非常重要的概念.Position从字面意思上看就是指定盒子的位置,指它相对父级的位置和相对它自身应该

定义网页元素

一.定位网页元素  position:  1.static  :默认值,代表没有定位,元素没有定位会以标准文档流方式展现出来  2.relative  :相对定位,元素以自身原来位置进行定位(如果设置元素浮动,那么会以浮动后的位置作为原来的位置)   规律:    设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置    设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响    设置相对定位的盒子原来的位置会被保留下来  3.absolute :绝对定位,元

css015 定位网页上的元素

css015 定位网页上的元素 一.   定位属性的功能 1.         四中类型的定位 Position: absolute relative fixed static a. 绝对定位 绝对定位通常单位为:px  em  percentage 绝对定位会脱离页面流,相对的是整个浏览器 如果a标签在设定了absolute relative fixed值的b标签中,那么a标签就是性对与b标签定位. b.相对定位 相对定位是相对于当前html流中的当前位置进行定位的. c. 固定定位 Back

CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 3.在一个非浮动元素<div>中存在一个浮动元素,当浮动元素高于元素本身的时候,内容就会溢出<div>中,解决方案如下: A:在</div>介绍之前添加一个换行,并且添加一个类<br class=”clear”/>,之后创建一个样式br.class{clear