- 浏览: 1657926 次
- 性别:
文章分类
- 全部博客 (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 782WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 748一. 简介 作为 Firefox 的插件, T ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 955<td align="center" ... -
深入浅出URL编码
2009-08-11 19:58 646版权声明:如有转载请求,请注明出处: http://blog ... -
【CSS布局.1】盒子模型
2009-08-20 15:51 616例子: .box { width: 200px; ... -
【CSS布局.4】五种CSS布局类型
2009-08-20 15:52 646CSS 布局的五种类型概述 有五种基本布局定位类型可供选择: ... -
【CSS布局.3】列表样式定义法
2009-08-20 15:52 602CSS代码: .list{ margin: 0px 10 ... -
区别不同浏览器,CSS hack写法
2009-08-20 16:01 620区别IE6 与FF : backgroun ... -
常用CSS缩写语法总结
2009-08-24 17:55 664使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩 ... -
CSS颜色代码大全
2009-08-25 15:55 869CSS颜色代码大全 FFFF ... -
CSS @import at规则
2009-09-02 10:40 682at规则 HTMLDog指南 > CSS高级指南 &g ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:05 688前言 如果你想尝试一 ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:06 628熟悉工作流程 在真正开始工作之前我们脑海中要形成这样一种 ... -
彻底弄懂CSS盒子模式之二
2009-09-02 17:07 613作者:唐国辉 实现原理动画演示:http://www ... -
彻底弄懂CSS盒子模式之三
2009-09-02 17:08 735一、下面请看float的精彩表演,有请。 大 ... -
彻底弄懂CSS盒子模式之五
2009-09-02 17:09 581在本人上一篇教程《彻 ... -
彻底弄懂CSS盒子模式之四
2009-09-02 17:09 677前言 在用CSS控制排版过程中,定位一直被人认为是一个难 ... -
CSS 盒模型
2009-09-02 17:11 599整理自:The CSS Box Model 中文:CSS 盒 ... -
DOM标准与IE的html元素事件模型区别
2009-09-23 13:35 701事件 HTML元素事件是 ... -
15个优秀的第三方 Web 技术集成
2009-09-25 10:13 689在 Web 开发与设计中, ...
相关推荐
2. **导航菜单**:菜单项通常使用相对定位,当鼠标悬停时,下拉菜单可以使用绝对定位显示在正确的位置。 3. **复杂布局**:在响应式设计中,绝对定位常用于在不同屏幕尺寸下调整元素位置。 ### 源码和工具 为了更好...
2. 相对定位与绝对定位:相对定位(relative)基于元素原本的位置进行偏移,而绝对定位(absolute)则相对于最近的非static定位的祖先元素进行定位。 3. Flex布局:弹性盒模型(Flexbox)是现代布局方式,适用于一维...
2. 定位模式:CSS提供了相对定位、绝对定位、固定定位和静态定位四种定位方式。相对定位使元素相对于其正常位置移动,不脱离文档流;绝对定位相对于最近的非静态定位祖先元素定位;固定定位则相对于浏览器窗口定位;...
总的来说,CSS布局中的绝对定位是一种强大的工具,可以实现复杂的布局设计。不过,随着现代浏览器对Flexbox和Grid布局的支持越来越好,开发者们越来越倾向于使用这些新方法来简化布局,提高可维护性和响应式设计的...
定位模式包括静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。边偏移属性则涉及top、bottom、left和right,用于控制元素在页面上具体位置的偏移量。 静态定位是默认的定位方式,元素...
4. **定位与布局**:CSS2.0引入了相对定位、绝对定位和固定定位,以及流体布局的概念。通过`position`属性,开发者可以调整元素在页面中的位置。此外,浮动(`float`)和清除(`clear`)也是布局中的关键工具。 5. ...
### CSS定位详解:绝对定位与相对定位 #### 相对定位(Relative Positioning) 相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...
在本文中,我们将详细介绍CSS布局机制的三种基本定位方式:普通流、浮动和绝对定位。 一、普通流 普通流是CSS布局机制的默认方式,在普通流中,元素的位置是由元素在HTML中的位置决定的。元素的position属性为...
定位主要包括静态定位、绝对定位和相对定位三种方式。 1. 静态定位(static):这是元素的默认定位方式,元素按照正常的文档流排列,不受left, right, top, bottom等属性的影响。 2. 绝对定位(absolute):绝对...
3. **定位布局**:绝对定位(absolute)和相对定位(relative)是实现复杂布局的关键。相对定位相对于其正常位置移动,而绝对定位则相对于最近的已定位祖先元素移动。 4. **Flexbox布局**:现代CSS的弹性盒模型...
4. **定位机制**:CSS提供了多种定位机制,包括静态定位、相对定位、绝对定位和固定定位。静态定位是元素的默认定位,其他三种定位则允许开发者精确控制元素的位置。 5. **浮动布局**:在早期的Web开发中,浮动布局...
在网页设计和开发中,定位(Positioning)是布局的关键元素,主要分为两种类型:相对定位(Relative Positioning)和绝对定位(Absolute Positioning)。这两种定位方式都是CSS(层叠样式表,Cascading Style Sheets...
CSS2提供了相对定位(relative)、绝对定位(absolute)和固定定位(fixed)三种定位方式。相对定位是基于元素原本的位置,而绝对定位则相对于最近的非静态定位祖先元素,固定定位则始终相对于视口。 五、多列布局 CSS2...
4. **定位机制**:CSS提供了相对定位、绝对定位和固定定位三种方式。相对定位使元素相对于其正常位置移动;绝对定位相对于最近的非静态定位的祖先元素定位;固定定位则相对于浏览器窗口定位,即使滚动页面也不会改变...
2. 绝对定位(Absolute):元素相对于最近的非 static 定位祖先元素进行定位,可精确控制位置。 3. 固定定位(Fixed):元素相对于浏览器窗口定位,常用于创建固定头部或侧边栏。 4. 网格布局(Grid Layout):CSS...
4. **定位**:通过相对定位(relative)、绝对定位(absolute)和固定定位(fixed),开发者可以精确控制元素在页面上的位置。 5. **长度单位**:CSS 2.0支持多种长度单位,如像素(px)、百分比(%)、em和pt等,...
CSS定位主要有四种方式,分别是默认定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。 1. **默认定位(static)**:这是元素的默认状态,元素遵循正常的文档流排列,top、right、...
在CSS布局中,绝对定位(absolute positioning)是一种强大的定位机制,允许元素脱离其正常文档流,并根据相对于某个特定祖先元素的位置进行布局。这篇博客“css-绝对定位的参考对象”深入探讨了这一主题,让我们一...