`

【CSS布局.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来设定上下关系的,一定是子级在上父级在下。

分享到:
评论

相关推荐

    CSS网页布局教程:绝对定位和相对定位

    CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了,如果你看完本篇文章还不理解绝对定位和相对定位的话,我看你就别学CSS了!哈哈! 概要: 本文主要描述XHTML中相对定位和绝对定位...

    Web前端开发基础:CSS网站布局 .ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 灵活使用 CSS设计网页 能力目标 学会使用 CSS对网站进行布局 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂...

    css 中的定位详解

    2.相对定位 相对定位可以相对于元素在文档流中的静态位置,给元素指定一个位置。如果将一个元素设置为相对定位,但是没有为 top、right、bottom、left 等属性设置值,那么元素将保持在文档流中的相同位置,就像使用...

    H5+CSS3.zip

    css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、相对定位、固定定位,相对定位与绝对定位组合; css弹性盒模型:flex属性,横轴排列,纵轴排列,flex占比; 行内元素水平居中设置; 定...

    CSS网站布局实录 (第二版)PDF版

    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 门户...

    css html 新手入门 静态页面布局

     刚开始学习网页布局的时候老是在纠结到底该用绝对定位还是相对定位,这个问题困扰了我很久,当我做了两天多的京东静态网页之后,才慢慢的不再纠结了。  相对定位和绝对定位什么时候都可以用,没有什么规定,哪个...

    自己整理div+css网页标准版式布局(50种布局方式)

    大四了,把之前学的些东西整理整理分享给大家,适合老师网页设计教材及初学者,里面包含了以下内容: 1、固定宽度CSS版式布局 ... 相对定位与绝对定位 IE6双倍边距bug 4、盒模型层次平面示意图和3D示意图

    WEB前端学习:CSS学习_CSS布局

    定位模式2.1、静态定位 static2.2、相对定位 relative2.3、绝对定位 absolute2.4、绝对定位垂直水平居中2.5、固定定位 fixed2.6、重叠七、常见布局1. 版心2. 两列左窄右宽型3. 通栏平均分布型持续更新… 该篇讲的是...

    零基础学HTML CSS源代码

    DIV+CSS布局.html DIV+CSS布局.html div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章(源代码\第15章) 示例描述:本章演示CSS基础部分知识。 CSS基础.html ...

    CSS之定位布局(position,定位布局技巧)

    css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位置。 2.各个属性值的描述...

    html+css布局的三种方式(自然布局/流动布局/定位布局)

    定位布局 相对定位和绝对定位都是相对于父div标签的。 相对——以这个元素的本来应该在的位置为参照点 绝对——以父div标签的原点(左上角)为参照点。 由于外层是position:relative,所以里层是absolute的话,则会...

    网页布局绝对定位(position)轻松简单

    要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。 使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为...

    前端网易云案例(网页版) html+css+flex布局

    我相信大家在点进来的那一刻,那你一定学习前端有一段...这篇所有代码,逻辑,非常的规范,希望通过网易云音乐页面更好的帮助你,对所有的常用css属性和代码重构思维,flex布局方式,绝对定位相对定位有更好的认识!

    CSS网格布局和定位网格项

    是的,在网格中支持绝对定位。可能你的第一反应是不希望在网格布局中使用定位的网格项,但是可能在某些使用案例中必须要使用它们。这篇文章主要用来解释定位网格项在网格容器(gridcontainer)中的特殊性。实际上,...

    CSS网页布局:关于定位(position)

    使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。...

    CSS中的四种定位区别详解

    普通定位,相对定位,绝对定位、固定定位定位这四种。 但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别,在使用的时候都很不灵活,要知道,想做好网页布局,这4个定位方式都是精髓呀,学好定位...

    精通CSS高级Web标准解决方案-包含源码(高清PDF中文版)

    本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...

Global site tag (gtag.js) - Google Analytics