Home >Web Front-end >JS Tutorial >Relative usage of Position attribute_javascript skills

Relative usage of Position attribute_javascript skills

WBOYOriginal: 2016-05-16 15:25:512032browse

Relative is an attribute of position, which is relative positioning.

The default value of position is static (that is, for any element, if its position attribute is not defined, then its position:static)

If you want a div #sub in this #demo to be positioned somewhere in the upper right corner relative to #demo, you should position #demo relatively and #sub absolutely.

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.

When used daily, position:relative is usually set to the parent layer of position:absolute;. If the parent layer has position:relative; and the child layer has position:absolute;, it will be positioned according to the boundary of the parent layer. Otherwise, position: absolute will search for the element boundaries set with position:relative layer by layer until the body element...

I wrote an example as follows:

Html code

static: Default value. 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 to perform absolute positioning relative to its closest parent object with the most positioning settings.

If no such parent object exists, the body object is used. And its cascade is defined through the z-index attribute

fixed: Not supported. Object positioning follows the absolute method. But there are some rules to follow

relative: The object cannot be stacked, but will be offset in the normal document flow according to attributes such as left, right, top, bottom and so on

" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> 
<!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 entire description of the relative usage of the position attribute shared by the editor. I hope you like it.

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：How to use JavaScript to implement the secondary navigation menu in WordPress_javascript skillsNext article：How to use JavaScript to implement the secondary navigation menu in WordPress_javascript skills

See more

Relative usage of Position attribute_javascript skills

Related articles