CSS position ÊôÐÔ

ʵÀý

¶¨Î» h2 ÔªËØ£º

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

Ç××ÔÊÔÒ»ÊÔ

ä¯ÀÀÆ÷Ö§³Ö

IE Firefox Chrome Safari Opera

ËùÓÐÖ÷Á÷ä¯ÀÀÆ÷¶¼Ö§³Ö position ÊôÐÔ¡£

×¢ÊÍ£ºÈκεİ汾µÄ Internet Explorer £¨°üÀ¨ IE8£©¶¼²»Ö§³ÖÊôÐÔÖµ "inherit"¡£

¶¨ÒåºÍÓ÷¨

position ÊôÐÔ¹æ¶¨ÔªËØµÄ¶¨Î»ÀàÐÍ¡£

˵Ã÷

Õâ¸öÊôÐÔ¶¨Ò彨Á¢ÔªËز¼¾ÖËùÓõĶ¨Î»»úÖÆ¡£ÈκÎÔªËØ¶¼¿ÉÒÔ¶¨Î»£¬²»¹ý¾ø¶Ô»ò¹Ì¶¨ÔªËØ»áÉú³ÉÒ»¸ö¿é¼¶¿ò£¬¶ø²»ÂÛ¸ÃÔªËØ±¾ÉíÊÇʲôÀàÐÍ¡£Ïà¶Ô¶¨Î»ÔªËØ»áÏà¶ÔÓÚËüÔÚÕý³£Á÷ÖеÄĬÈÏλÖÃÆ«ÒÆ¡£

ĬÈÏÖµ£º static
¼Ì³ÐÐÔ£º no
°æ±¾£º CSS2
JavaScript Óï·¨£º object.style.position="absolute"

¿ÉÄܵÄÖµ

Öµ ÃèÊö
absolute

Éú³É¾ø¶Ô¶¨Î»µÄÔªËØ£¬Ïà¶ÔÓÚ static ¶¨Î»ÒÔÍâµÄµÚÒ»¸ö¸¸ÔªËؽøÐж¨Î»¡£

ÔªËØµÄλÖÃͨ¹ý "left", "top", "right" ÒÔ¼° "bottom" ÊôÐÔ½øÐй涨¡£

fixed

Éú³É¾ø¶Ô¶¨Î»µÄÔªËØ£¬Ïà¶ÔÓÚä¯ÀÀÆ÷´°¿Ú½øÐж¨Î»¡£

ÔªËØµÄλÖÃͨ¹ý "left", "top", "right" ÒÔ¼° "bottom" ÊôÐÔ½øÐй涨¡£

relative

Éú³ÉÏà¶Ô¶¨Î»µÄÔªËØ£¬Ïà¶ÔÓÚÆäÕý³£Î»ÖýøÐж¨Î»¡£

Òò´Ë£¬"left:20" »áÏòÔªËØµÄ LEFT λÖÃÌí¼Ó 20 ÏñËØ¡£

static ĬÈÏÖµ¡£Ã»Óж¨Î»£¬ÔªËسöÏÖÔÚÕý³£µÄÁ÷ÖУ¨ºöÂÔ top, bottom, left, right »òÕß z-index ÉùÃ÷£©¡£
inherit ¹æ¶¨Ó¦¸Ã´Ó¸¸ÔªËؼ̳Рposition ÊôÐÔµÄÖµ¡£

TIY ʵÀý

¶¨Î»£ºÏà¶Ô¶¨Î»
±¾ÀýÑÝʾÈçºÎÏà¶ÔÓÚÒ»¸öÔªËØµÄÕý³£Î»ÖÃÀ´¶ÔÆä¶¨Î»¡£
¶¨Î»£º¾ø¶Ô¶¨Î»
±¾ÀýÑÝʾÈçºÎʹÓþø¶ÔÖµÀ´¶ÔÔªËØ½øÐж¨Î»¡£
¶¨Î»£º¹Ì¶¨¶¨Î»
±¾ÀýÑÝʾÈçºÎÏà¶ÔÓÚä¯ÀÀÆ÷´°¿ÚÀ´¶ÔÔªËØ½øÐж¨Î»¡£
ÉèÖÃÔªËØµÄÐÎ×´
±¾ÀýÑÝʾÈçºÎÉèÖÃÔªËØµÄÐÎ×´¡£´ËÔªËØ±»¼ô²Ãµ½Õâ¸öÐÎ×´ÄÚ£¬²¢ÏÔʾ³öÀ´¡£
Z-index
Z-index¿É±»ÓÃÓÚ½«ÔÚÒ»¸öÔªËØ·ÅÖÃÓÚÁíÒ»ÔªËØÖ®ºó¡£
Z-index
ÉÏÃæµÄÀý×ÓÖеÄÔªËØÒѾ­¸ü¸ÄÁËZ-index¡£

Ïà¹ØÒ³Ãæ

CSS ½Ì³Ì£ºCSS ¶¨Î»

HTML DOM ²Î¿¼Êֲ᣺position ÊôÐÔ

VUE