Web Front-end
HTML Tutorial
Detailed explanation of position attribute (absolute | relative | static | fixed) in CSS_html/css_WEB-ITnose
Detailed explanation of position attribute (absolute | relative | static | fixed) in CSS_html/css_WEB-ITnose
Let’s first take a look at the relevant definitions of the position attribute in CSS3 API:
How about it, are you still confused~~ It doesn’t matter, let me explain it to you one by one from a few basic concepts:
What is a document? flow?
Divide the form into rows from top to bottom, and arrange the elements in each row from left to right, which is the document flow.
There are only three situations that will cause elements to break out of the document flow, namely: floating, absolute positioning and relative positioning.
Static positioning (static):
static, no special positioning, it is the default positioning method of html elements, that is, we do not set The default position value of the element's position attribute is static. It follows the normal document flow object and the object occupies the document space. In this positioning method, top, right, bottom, left, z-index and other attributes are invalid.
Relative positioning (relative):
Relative positioning, also known as relative positioning, parsing it literally, we can see that Main characteristics of properties: Relative. But what is it relative to? This is an important point and the one that confuses me the most. Now let’s do a test. I think everyone will understand:
(1) Initial unpositioned
<style type="text/css"> #first { width: 200px; height: 100px; border: 1px solid red; } #second{ width: 200px; height: 100px; border: 1px solid blue;} </style> <body> <div id="first"> first</div> <div id="second">second</div> </body>
Initial original image:
(2) We modify the position attribute of the first element:
<style type="text/css"> #first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/ #second{width: 200px; height: 100px; border: 1px solid blue;} </style>
After relative offset of 20px:
-- >> The dotted line is the initial position space
Now you understand, relative positioning is relative to the offset of its original position in the document flow, and we also know that relative positioning also follows the normal document flow. It does not break away from the document flow, but its top/ The left/right/bottom attribute is valid. It can be said that it is an intermediate transition attribute from static to absolute. The most important thing is that it also occupies document space, and the document space occupied will not be affected by top / right / left / bottom and other attributes. changes due to its offset, which means that the elements behind it are positioned according to the dotted line position (before attributes such as top / left / right / bottom take effect). This must be understood.
Well, we know that the top / right / left / bottom attributes will not offset the document space occupied by the relative positioned element, so will margin / padding offset the document space? ? The answer is yes, let’s do an experiment together:
(3) Add margin attribute:
<style type="text/css"> #first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/ #second{width: 200px;height:100px;border: 1px solid blue;} </style>
After setting margin: 20px:
Compare it, is it very clear? Let’s first set the outer margin of the first element If it is set to 20px, then the second element will be offset downward by 40px, so the margin will occupy the document space! In the same way, you can test the effect of padding yourself!
Absolute positioning (absoulte):
Absoulte positioning is also called absolute positioning. Although its name is "absolute", Its function is closer to the word "relative". Why do you say this? It turns out that after elements positioned using absolute are out of the document flow, they can only be positioned based on ancestor class elements (parent class or above), and this ancestor class must be positioned in a postion non-static manner. For example, the a element uses absolute Positioning, it will start from the parent class and look for ancestor elements positioned in a non-static position (note, it must be a direct ancestor~) until the tag. What needs to be noted here is that, The relative and static methods use the
tag as the origin of positioning when the outermost layer is used, while the absolute method uses as the origin when there is no parent and position is not static positioning. The difference between the and elements is about 9px. Let’s take a look at the effect:(4) Add absolute attributes:
<html> <style type="text/css"> html{border:1px dashed green;} body{border:1px dashed purple;} #first{ width: 200px;height: 100px;border: 1px solid red;position: relative;} #second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;} </style> <body> <div id="first">relative</div> <div id="second">absoult</div> </body> </html>
Rendering:
哈哈，看了上面的代码后，细心的朋友肯定要问了，为什么absoulte定位要加 top:0; left:0; 属性，这不是多此一举呢？
其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~
少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：
既然absoulte是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：
(5) 在absoulte定位中添加margin / padding属性：
#first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;} #second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;} <div id="first">first <div id="second">second</div> </div> 效果图：
看懂了，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。
Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
固定定位(fixed)：
fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。
z-index属性：
z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
Note：使用static 定位或无position定位的元素z-index属性是无效的。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
