《精通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. guava学习--ComparisonChain

    转载:https://my.oschina.net/realfighter/blog/349824 在日常的工作中,我们经常需要对两个对象进行比较,以找出其中的异同, Java中提供了compare/ ...

  2. 如何获取域名的ip地址

  3. HTTP 错误 404.2 - Not Found 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置，无法提供您请求的页面

    详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面. 出现环境:win7 + IIS7.0 解决办法 ...

  4. 处理GitHub不允许上传大于100M文件问题

    第一步输入命令 cd /Users/Dora/Desktop/XXX(cd后面的这个路径要换成你自己项目的路径) 第二步输入命令 git rm --cached/Users/Dora/Desktop/ ...

  5. 【图像处理】【SEED-VPM】5.uImage的烧写 & NFS烧写文件系统

    基于 TFTP 烧写 uImage 当用户对 SEED-VPM6467 下的内核驱动源码进行调整或者添加新的设备驱动后,需要对内核进行重新编译配置,编译生成内核镜像后,可以通过 tftp 下载到 SE ...

  6. page object

    http://www.51testing.com/html/76/316176-849962.html

  7. 简单研究Loader笔记

    2015-11-11 18:25:34 1. Loader是什么? /** * Static library support version of the framework's {@link and ...

  8. 使用Runtime.getRuntime().exec()在java中调用python脚本

    举例有一个Python脚本叫test.py,现在想要在Java里调用这个脚本.假定这个test.py里面使用了拓展的包,使得pythoninterpreter之类内嵌的编译器无法使用,那么只能采用ja ...

  9. js判断是否是移动端 访问移动端网址

    1以下为代码,可放置在网站foot底部文件,或者haead顶部文件,建议将代码放在网站顶部,这样可以实现手机访问立即跳转! <script src="http://siteapp.ba ...

  10. Html标签第三课

    1.css div { position:absolute; } #d1 { height:100px; width:100px; border: solid 1px red; background- ...