Home > Article > Web Front-end > Share what position:relative; does in CSS?

Share what position:relative; does in CSS?

黄舟Original: 2017-07-19 14:39:232251browse

I still don’t understand what position:relative; in CSS means and what it does.

I understand all the other attributes of position

Quote

static: No special positioning, the object follows HTML positioning rules
absolute : Drag the object out of the document flow and use left, right, top, bottom and other attributes for absolute positioning. And its cascading is defined through the z-index attribute. At this time, the object does not have margins, but there are still 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 the several attributes mentioned in the document, except for relative, the effect will come out after trying other ones. It is really difficult to understand relative.

It’s not relative positioning.

For a static div#demo on the page, I want a div#sub in this #demo to be positioned somewhere in the upper right corner relative to #demo. I should use this position:relative. , and then add top and right to limit it.
Am I understanding it correctly?

But in actual development, I often don’t get the expected results. I think it's because I haven't fully understood this property yet. Now I want to fully master this, master it like position:absolute, and do whatever I want with HTML elements.
Please tell friends who understand this point, or provide some information, links or the like.

Thank you.
Question supplement:
Thank you for the link you provided, but it is not in depth. I hope to get a detailed understanding of position:relative.
Question supplement:
reeze, what you said is very good.
However, what about the positioning of the element itself that declares this attribute? What are the functions of its own top, left, right and bottom?
What you are talking about is the behavior of relative child elements. I want to know something about itself.
Question Supplement:
Didn’t you give some basic explanation?

"For a static div#demo in the page, I want a div#sub in the #demo to be positioned somewhere in the upper right corner relative to the #demo. I should use this position:relative Okay, and then add top, right to limit it.
Do I understand it correctly? "

First of all, let me answer your questions:
The default value of position is static, (that is to say, for any element, if its position attribute is not defined, its position: static)

If you want a div#sub in this #demo to be positioned relative to the #demo 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 will be 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;  
    }  
  
    div#demo{  
        position:relative;  
        border:1px solid #000;  
        margin:50px;  
        top:-50px;  
        line-height:18px;  
        overflow:hidden;  
        clear:both;  
        height:1%;  
    }  
  
    div#sub{  
        position:absolute;  
        right:10px;  
        top:10px;  
    }  
  
    div.relative{  
        position:relative;  
        left:400px;  
        top:-20px;  
    }  
  
    div.static,div.fixed,div.absolute,div.relative{  
        width:300px;      
    }  
  
    div.static{  
        background-color:#bbb;  
        position:static;  
    }  
  
    div.fixed{  
        background-color:#ffc0cb;  
    }  
  
    div.absolute{  
        background-color:#b0c4de;  
    }  
  
    div.relative{  
        background-color:#ffe4e1;  
    }  
    -->  
</style>  
</head>  
<body>  
    <div id="demo">  
        <div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>  
        <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>  
        <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>  
        <div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>  
    </div>  
</body>  
</html>

The above is the detailed content of Share what position:relative; does 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：Position attributes in CSS and sample code sharingNext article：Position attributes in CSS and sample code sharing

See more

Share what position:relative; does in CSS?

Related articles