Maison > Article > interface Web > Utilisation relative des compétences d'attribut de position_javascript

Utilisation relative des compétences d'attribut de position_javascript

WBOYoriginal: 2016-05-16 15:25:511970parcourir

Relative est un attribut de position, qui est un positionnement relatif.

La valeur par défaut de position est statique (c'est-à-dire que pour tout élément, si son attribut de position n'est pas défini, alors sa position :statique)

Si vous souhaitez qu'un div #sub dans cette #demo soit positionné quelque part dans le coin supérieur droit par rapport à #demo, vous devez positionner #demo de manière relative et #sub de manière absolue.

Absolute est positionné par rapport à son élément parent le plus proche. Si vous ne positionnez pas #demo de manière relative, alors le positionnement absolu de #sub sera positionné par rapport au corps.

relatif est positionné par rapport à lui-même, par exemple : #demo{position:relative;top:-50px;}, puis #demo se déplacera de 50px par rapport à sa position d'origine.

Autre : le relatif ne se détache pas du flux documentaire, l'absolu se détache du flux documentaire. Autrement dit : même si l'élément relatif semble avoir dévié de sa position d'origine, il reste en réalité inchangé dans le flux documentaire. L'élément absolu change non seulement de position, mais se détache également du flux documentaire.

Lorsqu'il est utilisé quotidiennement, position:relative est généralement défini sur la couche parent de position:absolute;. Si le calque parent a position:relative; et que le calque enfant a position:absolute;, il sera positionné en fonction de la limite. du calque parent. Sinon, position: Absolute recherchera les limites des éléments définies avec position:relative couche par couche jusqu'à l'élément body..

J'ai écrit un exemple comme suit :

Code HTML

statique : valeur par défaut. Pas de positionnement particulier, l'objet suit les règles de positionnement HTML

Absolu : faites glisser l'objet hors du flux de documents et utilisez les attributs gauche, droite, haut, bas et autres pour effectuer un positionnement absolu par rapport à son objet parent le plus proche avec le plus de paramètres de positionnement.

Si aucun objet parent n'existe, l'objet body est utilisé. Et sa cascade est définie via l'attribut z-index

corrigé : non pris en charge. Le positionnement des objets suit la méthode absolue. Mais il y a quelques règles à suivre

relatif : l'objet ne peut pas être empilé, mais sera décalé dans le flux normal de documents en fonction d'attributs tels que gauche, droite, haut, bas, etc.

" 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>

Ce qui précède est la description complète de l'utilisation relative de l'attribut position partagée par l'éditeur. J'espère que vous l'aimerez.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser JavaScript pour implémenter le menu de navigation secondaire dans les compétences WordPress_javascriptArticle suivant：Comment utiliser JavaScript pour implémenter le menu de navigation secondaire dans les compétences WordPress_javascript

Articles Liés

Voir plus