div css absolute positioning and relative positioning_html/css

div css absolute positioning and relative positioning_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:31:19

Original

1284 people have browsed it

div css absolute positioning and relative positioning

很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。

Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。

Relative，CSS中的写法是：position:relative; 他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。但是z-index也不是万能的，z-index也受到了等级的限制，关于这个等级的限制请查看《无法冲破的等级》

Many friends have asked me how to distinguish absolute from relative and how to use them ? We all know that absolute is absolute positioning and relative is relative positioning, but what do absolute and relative mean? What is the absolute, and relative is relative to what? So what characteristics do they have and what effects can they produce? What kind of skills are there between the two? Let’s explain them one by one below.

Absolute, the writing method in CSS is: position:absolute; It means absolute positioning. It refers to the upper left corner of the browser and cooperates with TOP, RIGHT, BOTTOM, and LEFT (hereinafter referred to as TRBL) for positioning. When TRBL is not set, the default is based on the parent's original point for marking. If TRBL is set and the parent does not set the position attribute, then the current absolute will be positioned with the upper left corner of the browser as the original point, and the position will be determined by TRBL.

Generally speaking, it is easy to make mistakes when using Absolute if the webpage is centered, because the webpage always automatically adapts to the size of the resolution, and Absolute will use the upper left corner of the browser as the The original point will not change position due to changes in resolution. This is where many people go wrong. The characteristics of the webpage on the left are very similar to Relative, but there are still essential differences. Relative, the writing method in CSS is: position:relative; It means relative positioning. It refers to the original point of the parent as the original point. If there is no parent, the previous element will be in the order of the text flow. The bottom is the original point, which is positioned with TRBL. When there are CSS attributes such as padding in the parent, the original point of the current level is positioned with reference to the original point of the parent content area. Sometimes we also need to rely on z-index to set the upper and lower relationship of the container. The larger the value, the higher it is at the top. The value range is a natural number. However, z-index is not omnipotent. Z-index is also subject to level restrictions. For information about this level restriction, please see "Unbreakable Levels"