《精通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. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(六)

    前言 在接下来的篇幅里将对系统的模块功能进行编写.主要以代码实现为主.这一篇我们需要完成系统模块“角色管理”的相关功能.完成后可以对系统框架结构有进一步了解. Abstract层 之前说过,Abstr ...

  2. JS数组常用函数以及查找数组中是否有重复元素的三种常用方法

    阅读目录: DS01:常用的查找数组中是否有重复元素的三种方法 DS02:常用的JS函数集锦 DS01.常用的查找数组中是否有重复元素的三种方法  1. var ary = new Array(&qu ...

  3. Win10

    安装 调优 关闭cortana 对于SSD: 关闭windows search , superfetch服务,减少磁盘读写 关闭动画(个性化里面) 开启项优化 休眠文件(powercfg -h off ...

  4. WireShark网络性能分析

    最近生产上出现一个性能问题,表现为:行情延时5s左右.从log一路追查下去,发现是我们自己写的一个行情网关(部署在xx.xx.xx.132)<->第三方的中转网关(部署在xx.xx.xx. ...

  5. java.lang.Boolean->介绍

    介绍: public class Boolean extends Object implements Serializable, Comparable<Boolean> Boolean类是 ...

  6. php 常用数组操作

    php常用的数组操作函数,包括数组的赋值.拆分.合并.计算.添加.删除.查询.判断.排序等 array_combine 功能:用一个数组的值作为新数组的键名,另一个数组的值作为新数组的值 <?p ...

  7. Unity3D之C# yield waitforseconds

    Wait for seconds requires a couple things in order to work properly and chances are if it's not work ...

  8. hihoCoder#1014

    刚开始学习C语言,准备在做hiho的题目的过程中来学习,在此进行记录,如果代码中有错误或者不当的地方还请指正. 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小 ...

  9. 例子：Backup Isolated Storage To SkyDrive

    本例演示了如何从隔离存储中备份文件到SkyDrive. 1. 登陆微软网站,申请“Create application”,获取一个“Client ID” 2. XAML中添加对Live相关控件库的命令 ...

  10. C语言深度学习——第一天

    首先声明一下,在我们写的程序中,会使用到一个头文件# include <head.h> 因为,在linux系统编程的时候,会用到很多头文件,为此,我用一个头文件全部包含在一起,头文件内容如 ...