《精通CSS.DIV网页样式与布局》视频6-10课总结图：

元素定位

（1）float:left/right;

左浮动；脱离普通文档流向左浮动（即向左对齐）；float属性必须应用在块级元素上，也就是说浮动并不应用于行内元素，或者说当应用了float，那么这个元素将被指定为块级元素。

一般页面排版时大的div块都会用到float:left/right；来进行排版，但是处于页面底端的脚本div块一般都会使用clear:both;来消除浮动影响。

例如：

页面已用div分好块：#container、#banner、#content、#links、#footer（#container中包含其他div块）如下图：

若要将页面排版如下，如何用CSS设置？

——>>元素定位如下：注意float的使用

（2）position:absolute/relative;

CSS定位的原理

把浏览器窗口想象成一个坐标系统：

CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。

采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言，CSS定位要简单得多。

绝对定位

一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。

要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。

举个绝对定位的例子，假如我们要在文档的四个角落各放置一个盒子：

#box1 { position:absolute; top: 50px; left: 50px;}#box2 { position:absolute; top: 50px; right: 50px;}#box3 { position:absolute; bottom: 50px; right: 50px;}#box4 { position:absolute; bottom: 50px; left: 50px;}

相对定位

要对元素进行相对定位，应将position属性的值设为relative。绝对定位与相对定位的区别在于计算位置的方式。

采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。

举个相对定位的例子，我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。注意这些图片将在文档中各自的原始位置处留下空位。

#dog1 { position:relative; left: 350px; bottom: 150px;}#dog2 { position:relative; left: 150px; bottom: 500px;}#dog3 { position:relative; left: 50px; bottom: 700px;}css里的position的值relative、absolute的实际意义

position属性其实是指本体对上级的定位。默认的属性值都是static，静态。

最关键的是relative（相对）以及absolute（绝对）。

如：

<div id="A">

<div id="B">

</div>

</div>

当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。

position:absolute: 绝对定位，是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的坐标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

position:relative: 相对定位，是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

注意:相对在无父级时以BODY为原始点,而绝对是以浏览器最左上角为原始点.

下面实例说明上面这句话:

<style>

#wrap{

width:500px;

background-color: red;

height:auto;

}

#column1{

position:absolute;

top:0px;

left:0px;

width:300px;

background-color: green;

}

#column2{

position:relative;

top:0px;

left:0px;

width:470px;

background-color: #FFFF66;

}

</style>

<body style="border:4px blue dotted"> /*这里我用框框出来,好识别*/

<div id="wrap">

<div id="column1">这里是第一列</div>

<div id="column2">这里是第二列</div>

</div>

</body>

实现效果：

3，

z-index属性：

（1）设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素的前面，即，z-index的值越小则所处堆叠位置越低

（2）z-index可有负值

（3）z-index仅能在定位元素上有效（例如position:absolute;）

例子：

显示效果：

——这种重叠，如果不设置z-index属性会是什么效果?

显示效果：

“后来者居上”；所以如果想改变这种重叠，就要使用z-index属性）

CSS元素定位6-10课的更多相关文章

  1. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  2. 【WEB自动化】【第一节】【Xpath和CSS元素定位】

    目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...

  3. 复习-css元素定位

    css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std ...

  4. CSS元素定位

    使用 CSS 选择器定位元素 CSS可以通过元素的id.class.标签(input)这三个常规属性直接定位到,而这三种编写方式,在HTML中编写style的时候,可以进行标识如: #su       ...

  5. css元素定位样式

    曾经写网页,学css整体上不难,但就是元素定位,始终一知半解,直到今天,本着实践出真知的理念,经过认真测试,总结出了如下结论. css 定位: positionstatic : 默认静止定位,元素在正 ...

  6. css选择器用法，使用css定位元素，css和xpath元素定位的区别

    css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium ...

  7. html 元素定位position-relative, absolute, fixed, static

    看到这个,你有什么想法? Difference between static and relative positioning 如果你能完全看明白,那几本上css 元素定位的东西基本都会了.本文也不用 ...

  8. python3+selenium3自动化1——元素定位

    1.selenium的webdriver提供了八种基本的元素定位方法 打开浏览器 driver = webdriver.Chrome() driver.get('https://www.baidu.c ...

  9. 《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法之By css上卷（详细教程）

    1.简介 CSS定位方式和xpath定位方式基本相同,只是CSS定位表达式有其自己的格式.CSS定位方式拥有比xpath定位速度快,且比CSS稳定的特性.下面详细介绍CSS定位方式的使用方法.xpat ...

随机推荐

  1. 16061701（地图灯光编译Beast报错）

    [目标] 地图灯光编译报错 [思路] 1 我自己测c2_cwd_rt 附件为当时log 2 ExampleGame\BeastCache\PersistentCache 3 重新删除掉BeastCac ...

  2. The different of mouseover and mouseenter

    l论事件onmouseover 和 onmouseenter:同类比较onmouseout 和 onmouseleave; 使用onmouseover时,鼠标除了被设置事件的元素,还会触发其子元素: ...

  3. 【SPI】Polling Interrupt DMA

    三種將資料在I/O間傳送的方法有 1. Polling2. Interrupt-driven I/O3. DMA(Direct Memory Access) Polling:最簡單的方式讓I/O de ...

  4. ubuntu ulimit 设置

    永久设置ubuntu ulimit 之前是ulimit -n 65535那样设置,不过貌似只是当前环境有效果,重启服务器的话,又失效了...今天无意找到一个设置的方法,可以永久设置ulimit的参数. ...

  5. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) E. Goods transportation (非官方贪心解法)

    题目链接:http://codeforces.com/contest/724/problem/E 题目大意: 有n个城市,每个城市有pi件商品,最多能出售si件商品,对于任意一队城市i,j,其中i&l ...

  6. 主流 SQLServer 迁移到 MySQL 工具对比

    首次需要数据转换是测试环节,当时为了快速验证新研发云产品性能与结果准确性(算法类),所以需大量的原始数据,最快的办法就是使用老产品的真实数据.因为在前期数据转换时主用于内部验证,并没有花很多心思去处理 ...

  7. 白皮 Chapter 2

    7.2 做题一遍就过的感觉简直太美好啦~然而我并没有测试数据QAQ //program name digit #include<cstdio> #include<iostream&g ...

  8. Mysql VARCHAR的最大长度到底是多少

    MySQL 数据库的varchar类型在4.1以下的版本中的最大长度限制为255,其数据范围可以是0~255或1~255(根据不同版本数据库来定).在 MySQL5.0以上的版本中,varchar数据 ...

  9. cisco vpn client 自动登陆脚本

    cisco vpn client 不能保存密码,每次都要输入太麻烦了 写了个wsh,可以自动输入密码,并登陆 '需要一个好听的名字 <job id="cisco"> ' ...

  10. 005-Scala数组操作实战详解

    005-Scala数组操作实战详解 Worksheet的使用 交互式命令执行平台 记得每次要保存才会出相应的结果 数组的基本操作 数组的下标是从0开始和Tuple不同 缓冲数组ArrayBuffer( ...