在使用div+css进行网页制作时,我们经常需要对某些元素进行一些必要的定位,使其能按照我们预想的效果呈现在页面合适的位置上,而float和position便是实现这一效果的两种方法。
一、浮动(float)
float属性经常被运用于制作Horizontal Menu(横向菜单)和实现多列式网页布局。根据它提供的 left 和right 两个值,我们可以很容易的把特定的元素从文档流中抽出(也因此浮动元素不占用正常文档流的空间),靠左或者靠右对齐,而文字内容则围绕在浮动元素的周围。如果是一系列的浮动元素,则会根据所指定的浮动方式自动的排列成一行;如果页面宽度不够,则会自动换行。
二、定位(position):相对定位(relative)、绝对定位(absolute)和z-index属性
position属性同样可以实现和float属性一样的效果,其主要被运行于网页布局上。它主要提供static, relative, absolute和fixed四个值。其中static为默认值,指示元素出现在正常的文档流中;另外三个的说明详见如下:
相对定位(relative):相对于该元素在文档流中的正常位置进行偏移定位,原占位仍保留。
绝对定位(absolute):相对于static定位以外的最邻近父级元素进行偏移定位,即相对于其直接父级元素。绝对定位较少直接单独使用在正常的文档流中,而是配合相对定位来进行一些更灵活更精确的定位。换言之,就是绝对定位主要运行于进行了相对定位的元素框架层里面,然后依据该层的最左上点作为基点进行偏移定位。
固定定位(fixed):相对于浏览器窗口进行定位,即固定定位是以浏览器窗口的最左上点作为基点进行偏移定位的。其位置随时跟随浏览器大小的变化而移动,因此应用得很少。主要运行于浏览器窗口的贴边定位。绝对定位(absolute)同样可以应用在固定定位的框架层里面。
对于这三种定位,被定位的元素的位置都是通过 "left", "top", "right" 以及 "bottom" 这四个属性进行指定的。需要将被这三种方式定位的对象还原到正常的文档流中,可使用static属性对其再次定位。
z-index属性:使用了以上三种定位后,都会使正常的文档流一定程度上发生改变,造成元素显示出现重叠的情形,特别是使用绝对定位时。为了能让重叠的元素有序的显示出来,我们需要在定位时对相关元素加上z-index属性,其值是一个整数值(默认值为0),数值越大表示拥有的优先级越高。该属性只对使用了定位的元素有效。
示例:
column1
z-index默认值为0,数值越大表示该元素拥有更高的显示优先级。
column2
column3
column4
<div id="demo">
<div class="column c1">column1</div>
<p>z-index默认值为0,数值越大表示该元素拥有更高的显示优先级。</p>
<div class="column" id="c2">column2</div>
<div class="column" id="c3">column3</div>
</div>
<div id="d2">
<div class="column c1">column4</div>
</div>
css代码:
+ expand source
三、简要总结
脱离文档 原占位保留 清除方式 z-index属性
浮动(float) 是 否 clear:both 不支持
相对定位(relative) 否 是 position:static 支持
绝对定位(absolute) 是 否 position:static 支持
固定定位(fixed) 是 否 position:static 支持
转摘自:http://www.yeeann.com/archives/119.html
分享到:
相关推荐
完全平方公式变形的应用练习题_2(转摘).doc
js和css事件 转摘 clip-path css3属性 应用 图片(懒|预)加载原理 URLSearchParams搜索参数接口 让你快速获取参数和管理参数 CSS.escape和CSS.supports()静态方法 处理css特殊器字符和判断浏览器是否支持某个css...
Eclipse中用SWT和JFace开发入门-转摘 .doc
熟练的软件设计师和资料分析师利用它来开发应用软件,而一些不熟练的程序员和非程序员的"进阶用户"则能使用它来开发简单的应用软件。虽然它支援部份面向对象(OO)技术,但是未能成为一种完整的面向对象开发工具。 ...
公司控制权之争及公司股权设计模式转摘.doc
新零售时代,小卖家如何迅速做出销量(转摘).zip
新零售时代,小卖家如何迅速做出销量(转摘).doc
新零售时代,小卖家如何迅速做出销量(转摘)-知识杂货店.doc
ZHU Ming编辑 QQ279999471 (本教程附带丰富的完整例子,价值上千元的教程,) 1. AJAX介绍 AJAX是一种运用(JavaScript)和可扩展标记语言(XML),...原文版权归作者所有,如有转摘请注明原作者以及编辑者信息QQ279999471
ASP.NET2.0+SQL Server2005构建多层应用, 从网上转摘一篇文章
华为从事通信网络技术与产品的研究、开发、生产与销售,是中国电信市场的主要供应商之一,并已成功进入全球电信市场。每年华为都要在各大高校招聘大批的应界生,特别是华中科技大学。 下面据说是华为公司的笔试题...
但到了Vista系统和现下的win7系统时,这个问题就变得非常简单了,可以在磁盘管理中任意操作分区、合区的应用,而且十分安全,根本不用做数据的备份。记得前几年还是XP系统时,用PQ分区失败,丢掉了全部数据,十分...
这个是我从网上找到的资料,现在共享给大家,希望能帮助到大家。
在当今快速的开发环境中,应用程序的测试总是处于次要地位。DataFactory是一种强的的数据产生器,它允许开发人员和QA很容易产生百万行有意义的正确的测试数据库, DataFactory 首先读取一个数据库方案,用户随后点击...
LeetCode判断字符串是否循环 Blog LeetCode 动态规划相关 转摘 Javascript CSS HTML Hybrid APP 性能优化 异常处理 模块化 编程题 Vue.js React.js Web 安全 操作系统 网络 Node 架构设计
转摘前言:逆变器就是将低压直流电转变成为工频交流电的装置。许多场合需要用到 逆变器,比如:汽车中的电源是由蓄电池提供的12V 或者24V 直流电,如果要在汽车中使用 电视、冰箱等普通家用电器,就要逆变器;在...
本文为转摘的普及商事知识的笔记.md档,可以得到一些常识性的认知。从商业角度看,公司的最终目标无非就是赚钱,持续的赚钱,持续的赚更多的钱。为此划分了公司成长的三个阶段:产品阶段,规模扩张阶段,持续经营...
AJAX可以用来创建更多交互式的网络应用程序。 3. AJAX源代码 简要分析上一章节效果的代码原理 4. AJAX与数据库 AJAX可以用来和数据端进行数据的交互联通。 5. 使用AJAX制作留言本 使用已有的AJAX教程,制作一个...
一、开发环境:pb11.2 8669 二、pb的webservice程序必须置于英文目录下,含中文路径时部署会出错; 三、代码只要改一个地方: ...pb8版权所有,QQ:10308237,呵呵,转摘时记得不要把pb8的信息kill掉就好了;
起初作者编写它可能是为了提高动态网页应用,为了减轻数据库检索的压力,来做的这个缓存系统。它的缓存是一种分布式的,也就是可以允许不同主机上的多个用户同时访问这个缓存系统, 这种方法不仅解决了共享内存只能...