《精通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. php生成图片缩略图，支持png透明

    注:此功能依赖GD2图形库 PHP生成缩略图类   <?php /* * desc: Resize Image(png, jpg, gif) * author: 十年后的卢哥哥(http://w ...

  2. （转）redis 3.0的集群部署

    一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis3.0中推出,可以看作者antirez的声明:http://antirez.com/ ...

  3. android学习之RadioButton和CheckBox

    移通152 余继彪 RadioBuuton是一个单选按钮,CheckBox是一个复选按钮 . RadioButton的使用 ,首先要将RadioButton放在RadioGroup中,RadioGro ...

  4. 动态加载jQuery

    success: function(data){ for(var i in data){ $('.x-details>ul:eq(0)').append("<li>&quo ...

  5. hdu 1231, dp ,maximum consecutive sum of integers, find the boundaries, possibly all negative, C++ 分类： hdoj 2015-07-12 03:24 87人阅读 评论(0) 收藏

    the algorithm of three version below is essentially the same, namely, Kadane's algorithm, which is o ...

  6. Glide 小知识点

  7. PL/SQL Developer记住用户名密码

    在使用PL/SQL Developer时,为了工作方便希望PL/SQL Developer记住登录Oracle的用户名和密码: 设置方法:PL/SQL Developer ->tools-> ...

  8. SDWebImage下载图片有时候无法成功显示出来

    之前用下面的方法现在图片,有时候会出现图片没有下载成功显示: - (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)p ...

  9. 黑马程序员——OC基础 三种特性之封装

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) 三种特性之一封装 (一)set方法和get方法 1)  set方法 1&g ...

  10. AngularJS身份验证：Cookies VS Tokens

    基于cookie的身份验证:Cookie-Based Authentication 基于token的身份验证:Token-Based Authentication 跨域:cross-domain 说明 ...