`

【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网页布局教程:绝对定位和相对定位

    2. **导航菜单**:菜单项通常使用相对定位,当鼠标悬停时,下拉菜单可以使用绝对定位显示在正确的位置。 3. **复杂布局**:在响应式设计中,绝对定位常用于在不同屏幕尺寸下调整元素位置。 ### 源码和工具 为了更好...

    div_css布局.rar

    2. 相对定位与绝对定位:相对定位(relative)基于元素原本的位置进行偏移,而绝对定位(absolute)则相对于最近的非static定位的祖先元素进行定位。 3. Flex布局:弹性盒模型(Flexbox)是现代布局方式,适用于一维...

    css布局定位.zip

    2. 定位模式:CSS提供了相对定位、绝对定位、固定定位和静态定位四种定位方式。相对定位使元素相对于其正常位置移动,不脱离文档流;绝对定位相对于最近的非静态定位祖先元素定位;固定定位则相对于浏览器窗口定位;...

    CSS布局实例[绝对定位:一栏固定,一栏自适应]

    总的来说,CSS布局中的绝对定位是一种强大的工具,可以实现复杂的布局设计。不过,随着现代浏览器对Flexbox和Grid布局的支持越来越好,开发者们越来越倾向于使用这些新方法来简化布局,提高可维护性和响应式设计的...

    前端css定位.pdf

    定位模式包括静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。边偏移属性则涉及top、bottom、left和right,用于控制元素在页面上具体位置的偏移量。 静态定位是默认的定位方式,元素...

    CSS文档 CSS2.0.chm

    4. **定位与布局**:CSS2.0引入了相对定位、绝对定位和固定定位,以及流体布局的概念。通过`position`属性,开发者可以调整元素在页面中的位置。此外,浮动(`float`)和清除(`clear`)也是布局中的关键工具。 5. ...

    css定位绝对相对定位

    ### CSS定位详解:绝对定位与相对定位 #### 相对定位(Relative Positioning) 相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...

    前端大厂最新面试题-css布局.docx

    在本文中,我们将详细介绍CSS布局机制的三种基本定位方式:普通流、浮动和绝对定位。 一、普通流 普通流是CSS布局机制的默认方式,在普通流中,元素的位置是由元素在HTML中的位置决定的。元素的position属性为...

    divcss盒子之绝对定位和相对定位.docx

    定位主要包括静态定位、绝对定位和相对定位三种方式。 1. 静态定位(static):这是元素的默认定位方式,元素按照正常的文档流排列,不受left, right, top, bottom等属性的影响。 2. 绝对定位(absolute):绝对...

    css1.rar_DIV css布局

    3. **定位布局**:绝对定位(absolute)和相对定位(relative)是实现复杂布局的关键。相对定位相对于其正常位置移动,而绝对定位则相对于最近的已定位祖先元素移动。 4. **Flexbox布局**:现代CSS的弹性盒模型...

    div+css布局大全

    4. **定位机制**:CSS提供了多种定位机制,包括静态定位、相对定位、绝对定位和固定定位。静态定位是元素的默认定位,其他三种定位则允许开发者精确控制元素的位置。 5. **浮动布局**:在早期的Web开发中,浮动布局...

    绝对定位和相对定位

    在网页设计和开发中,定位(Positioning)是布局的关键元素,主要分为两种类型:相对定位(Relative Positioning)和绝对定位(Absolute Positioning)。这两种定位方式都是CSS(层叠样式表,Cascading Style Sheets...

    css2.chm最新文档

    CSS2提供了相对定位(relative)、绝对定位(absolute)和固定定位(fixed)三种定位方式。相对定位是基于元素原本的位置,而绝对定位则相对于最近的非静态定位祖先元素,固定定位则始终相对于视口。 五、多列布局 CSS2...

    div+css布局大全..rar

    4. **定位机制**:CSS提供了相对定位、绝对定位和固定定位三种方式。相对定位使元素相对于其正常位置移动;绝对定位相对于最近的非静态定位的祖先元素定位;固定定位则相对于浏览器窗口定位,即使滚动页面也不会改变...

    css.rar_css_css布局

    2. 绝对定位(Absolute):元素相对于最近的非 static 定位祖先元素进行定位,可精确控制位置。 3. 固定定位(Fixed):元素相对于浏览器窗口定位,常用于创建固定头部或侧边栏。 4. 网格布局(Grid Layout):CSS...

    css 2.0.chm

    4. **定位**:通过相对定位(relative)、绝对定位(absolute)和固定定位(fixed),开发者可以精确控制元素在页面上的位置。 5. **长度单位**:CSS 2.0支持多种长度单位,如像素(px)、百分比(%)、em和pt等,...

    CSS定位.pdf

    CSS定位主要有四种方式,分别是默认定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。 1. **默认定位(static)**:这是元素的默认状态,元素遵循正常的文档流排列,top、right、...

    css-绝对定位的参考对象

    在CSS布局中,绝对定位(absolute positioning)是一种强大的定位机制,允许元素脱离其正常文档流,并根据相对于某个特定祖先元素的位置进行布局。这篇博客“css-绝对定位的参考对象”深入探讨了这一主题,让我们一...

Global site tag (gtag.js) - Google Analytics