Home > Article > Web Front-end > Introduction to the role of position:relative; in CSS

Introduction to the role of position:relative; in CSS

不言Original: 2018-07-02 09:32:553602browse

This article mainly introduces the role of position:relative; in CSS. It has certain reference value. Now I share it with you. Friends in need can refer to

position in CSS: Relative controls the relative positioning of elements. Relative does not break away from the document flow, while absolute breaks away from the document flow. Although the relative element appears to have deviated from its original position, it actually remains unchanged in the document flow.

Quote

static: No special positioning, the object follows HTML positioning rules
absolute: Drag the object out of the document flow, using left, right, top, bottom and other attributes. Absolute positioning. And its cascading is defined through the z-index attribute. At this time, the object does not have margins, but still has padding and borders.
relative: The object cannot be stacked, but will be offset in the normal document flow based on attributes such as left, right, top, bottom, etc.
fixed: IE5. 5 and NS6 do not yet support this attribute

"For a static p#demo in the page, I want a p#sub in this #demo to be positioned somewhere in the upper right corner relative to the #demo. I should use this position:relative, and then add top and right to limit it.
I understand it correctly, right? "
First of all, let me answer your doubts:
The default value of position is static, (that is, for any element, if its position attribute is not defined, its position: static)
If you want a p#sub in this #demo to be relative to # The demo is positioned somewhere in the upper right corner. #demo should be positioned relatively and #sub absolutely positioned.
Absolute is positioned relative to its nearest parent element. If you do not position #demo relatively, then the absolute positioning of #sub is positioned relative to the body.
relative is positioned relative to itself, for example: #demo{position:relative;top:-50px;}, then #demo will move 50px relative to its original position.
Another: relative does not break away from the document flow, absolute breaks away from the document flow. That is to say: although the relative element appears to have deviated from its original position, it actually remains unchanged in the document flow. The absolute element not only changes its position, but also breaks away from the document flow.

I wrote an example as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>position</title> 
<style type="text/css"> 
<!-- 
body{ 
font-size:12px; 
margin:0 auto; 
} 
p#demo{ 
position:relative; 
border:1px solid #000; 
margin:50px; 
top:-50px; 
line-height:18px; 
overflow:hidden; 
clear:both; 
height:1%; 
} 
p#sub{ 
position:absolute; 
right:10px; 
top:10px; 
} 
p.relative{ 
position:relative; 
left:400px; 
top:-20px; 
} 
p.static,p.fixed,p.absolute,p.relative{ 
width:300px; 
} 
p.static{ 
background-color:#bbb; 
position:static; 
} 
p.fixed{ 
background-color:#ffc0cb; 
} 
p.absolute{ 
background-color:#b0c4de; 
} 
p.relative{ 
background-color:#ffe4e1; 
} 
--> 
</style> 
</head> 
<body> 
<p id="demo"> 
<p class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </p> 
<p id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </p> 
<p class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </p> 
<p class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </p> 
</p> 
</body> 
</html>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website !

Related recommendations:

How to use the position:fixed attribute to center a DIV

Use CSS3 to achieve Material Design effects

The above is the detailed content of Introduction to the role of position:relative; in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to changing the mouse to hand style using CSSNext article：Introduction to changing the mouse to hand style using CSS

See more

Introduction to the role of position:relative; in CSS

Related articles