- 浏览: 1595896 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
Absolute ,CSS 中的写法是:position:absolute; TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并 且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始 点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。
Relative
,CSS中的写法是:position:relative;
他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS
属性时,当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
发表评论
-
15款基于浏览器扩展的WEB开发工具
2009-07-29 08:44 745WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 724一. 简介 作为 Firefox 的插件, T ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 920<td align="center" ... -
深入浅出URL编码
2009-08-11 19:58 610版权声明:如有转载请求,请注明出处: http://blog ... -
【CSS布局.1】盒子模型
2009-08-20 15:51 586例子: .box { width: 200px; ... -
【CSS布局.4】五种CSS布局类型
2009-08-20 15:52 615CSS 布局的五种类型概述 有五种基本布局定位类型可供选择: ... -
【CSS布局.3】列表样式定义法
2009-08-20 15:52 574CSS代码: .list{ margin: 0px 10 ... -
区别不同浏览器,CSS hack写法
2009-08-20 16:01 595区别IE6 与FF : backgroun ... -
常用CSS缩写语法总结
2009-08-24 17:55 636使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩 ... -
CSS颜色代码大全
2009-08-25 15:55 822CSS颜色代码大全 FFFF ... -
CSS @import at规则
2009-09-02 10:40 652at规则 HTMLDog指南 > CSS高级指南 &g ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:05 653前言 如果你想尝试一 ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:06 589熟悉工作流程 在真正开始工作之前我们脑海中要形成这样一种 ... -
彻底弄懂CSS盒子模式之二
2009-09-02 17:07 580作者:唐国辉 实现原理动画演示:http://www ... -
彻底弄懂CSS盒子模式之三
2009-09-02 17:08 703一、下面请看float的精彩表演,有请。 大 ... -
彻底弄懂CSS盒子模式之五
2009-09-02 17:09 557在本人上一篇教程《彻 ... -
彻底弄懂CSS盒子模式之四
2009-09-02 17:09 653前言 在用CSS控制排版过程中,定位一直被人认为是一个难 ... -
CSS 盒模型
2009-09-02 17:11 572整理自:The CSS Box Model 中文:CSS 盒 ... -
DOM标准与IE的html元素事件模型区别
2009-09-23 13:35 666事件 HTML元素事件是 ... -
15个优秀的第三方 Web 技术集成
2009-09-25 10:13 661在 Web 开发与设计中, ...
相关推荐
CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了,如果你看完本篇文章还不理解绝对定位和相对定位的话,我看你就别学CSS了!哈哈! 概要: 本文主要描述XHTML中相对定位和绝对定位...
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 灵活使用 CSS设计网页 能力目标 学会使用 CSS对网站进行布局 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂...
2.相对定位 相对定位可以相对于元素在文档流中的静态位置,给元素指定一个位置。如果将一个元素设置为相对定位,但是没有为 top、right、bottom、left 等属性设置值,那么元素将保持在文档流中的相同位置,就像使用...
css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、相对定位、固定定位,相对定位与绝对定位组合; css弹性盒模型:flex属性,横轴排列,纵轴排列,flex占比; 行内元素水平居中设置; 定...
3.12 绝对定位与相对定位 3.12.1 绝对定位 3.12.2 相对定位 3.12.3 何时选用绝对与相对定位 第4章 CSS网站元素设计 4.1 用CSS设计网站导航 4.1.1 横向导航 4.1.2 纵向导航 4.1.3 下拉及多级弹出式菜单 4.1.4 门户...
刚开始学习网页布局的时候老是在纠结到底该用绝对定位还是相对定位,这个问题困扰了我很久,当我做了两天多的京东静态网页之后,才慢慢的不再纠结了。 相对定位和绝对定位什么时候都可以用,没有什么规定,哪个...
大四了,把之前学的些东西整理整理分享给大家,适合老师网页设计教材及初学者,里面包含了以下内容: 1、固定宽度CSS版式布局 ... 相对定位与绝对定位 IE6双倍边距bug 4、盒模型层次平面示意图和3D示意图
定位模式2.1、静态定位 static2.2、相对定位 relative2.3、绝对定位 absolute2.4、绝对定位垂直水平居中2.5、固定定位 fixed2.6、重叠七、常见布局1. 版心2. 两列左窄右宽型3. 通栏平均分布型持续更新… 该篇讲的是...
DIV+CSS布局.html DIV+CSS布局.html div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章(源代码\第15章) 示例描述:本章演示CSS基础部分知识。 CSS基础.html ...
css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位置。 2.各个属性值的描述...
定位布局 相对定位和绝对定位都是相对于父div标签的。 相对——以这个元素的本来应该在的位置为参照点 绝对——以父div标签的原点(左上角)为参照点。 由于外层是position:relative,所以里层是absolute的话,则会...
要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。 使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为...
我相信大家在点进来的那一刻,那你一定学习前端有一段...这篇所有代码,逻辑,非常的规范,希望通过网易云音乐页面更好的帮助你,对所有的常用css属性和代码重构思维,flex布局方式,绝对定位相对定位有更好的认识!
是的,在网格中支持绝对定位。可能你的第一反应是不希望在网格布局中使用定位的网格项,但是可能在某些使用案例中必须要使用它们。这篇文章主要用来解释定位网格项在网格容器(gridcontainer)中的特殊性。实际上,...
使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。...
普通定位,相对定位,绝对定位、固定定位定位这四种。 但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别,在使用的时候都很不灵活,要知道,想做好网页布局,这4个定位方式都是精髓呀,学好定位...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...