Position attribute_javascript 스킬의 상대적 사용법-JS 튜토리얼-php.cn

Position attribute_javascript 스킬의 상대적 사용법

WBOY

풀어 주다： 2016-05-16 15:25:51

원래의

2031명이 탐색했습니다.

Relative는 위치의 속성으로 상대적 위치 지정입니다.

position의 기본값은 static입니다. 즉, 모든 요소에 대해 position 속성이 정의되지 않은 경우 position:static이 됩니다.

이 #demo의 div #sub를 #demo를 기준으로 오른쪽 상단에 배치하려면 #demo를 상대적으로 배치하고 #sub를 절대적으로 배치해야 합니다.

절대 위치는 가장 가까운 상위 요소를 기준으로 배치됩니다. #demo를 상대적으로 배치하지 않으면 #sub의 절대 위치가 본문을 기준으로 배치됩니다.

relative는 자신을 기준으로 위치가 지정됩니다(예: #demo{position:relative;top:-50px;}). 그러면 #demo는 원래 위치를 기준으로 50px를 이동합니다.

또 다른: 상대는 문서 흐름에서 벗어나지 않으며, 절대는 문서 흐름에서 벗어나지 않습니다. 즉, 상대 요소가 원래 위치에서 벗어난 것처럼 보이지만 실제로는 문서 흐름에서 변경되지 않은 상태로 유지됩니다. 절대 요소는 위치를 변경할 뿐만 아니라 문서 흐름에서 벗어납니다.

매일 사용하는 경우 위치:상대적은 일반적으로 위치:절대;의 상위 레이어로 설정됩니다. 상위 레이어에 위치:상대적;이 있고 하위 레이어에 위치:절대;가 있는 경우 경계에 따라 배치됩니다. 그렇지 않으면 position:absolute는 body 요소까지 position:relative 레이어로 설정된 요소 경계를 검색합니다.

다음과 같이 예시를 작성했습니다.

HTML 코드

정적: 기본값입니다. 특별한 위치 지정은 없으며 개체는 HTML 위치 지정 규칙을 따릅니다.

절대: 문서 흐름 밖으로 개체를 드래그하고 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 사용하여 위치 지정 설정이 가장 많은 가장 가까운 상위 개체를 기준으로 절대 위치 지정을 수행합니다.

해당 상위 개체가 없으면 본문 개체가 사용됩니다. 그리고 그 캐스케이드는 z-index 속성을 통해 정의됩니다

수정됨: 지원되지 않습니다. 객체 위치 지정은 절대 방법을 따릅니다. 하지만 따라야 할 몇 가지 규칙이 있습니다

상대적: 개체는 쌓일 수 없지만 왼쪽, 오른쪽, 위쪽, 아래쪽 등과 같은 속성에 따라 일반적인 문서 흐름에서 오프셋됩니다

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

로그인 후 복사

위는 편집자가 공유한 위치 속성의 상대적 사용법에 대한 전체 설명입니다.