Which reference object is CSS relative positioning_html/css

Which reference object is CSS relative positioning_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:39:05

Original

1505 people have browsed it

What is the reference object for CSS relative positioning:

Since it is positioning, there must be a reference object as a reference, otherwise top and left cannot be used , bottom and right attributes.

The following is a brief introduction to the reference object of absolutely positioned objects. Let’s first look at an example of code that does not use positioning:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent{  width:200px;  height:200px;  border:1px solid red;  margin:30px;}.children{  width:100px;  height:100px;  background-color:green;}</style></head><body><div class="parent">  <div class="children"></div></div></body></html>

Copy after login

The code runs as we expected. Let’s take a look at the code that performs relative positioning for the sub-div:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent{  width:200px;  height:200px;  border:1px solid red;  margin:30px;}.children{  width:100px;  height:100px;  background-color:green;  position:relative;  left:20px;  top:20px;}</style></head><body><div class="parent">  <div class="children"></div></div></body></html>

Copy after login

The above code performs relative positioning for the sub-div. Judging from the performance of the code on the browser, you may think that the reference object of relative positioning is the parent div, but in fact this is just an illusion. The reference object for relative positioning is the object itself. It can be considered that the upper left corner of the object is the origin, the horizontal direction is the X axis, and the vertical direction is the Y axis. The top, left, bottom and right attributes are positioned based on this coordinate axis.

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0508/939.html

The most original address is: http://www.softwhy.com/ forum.php?mod=viewthread&tid=4684