CSS에서 position:relative;는 무엇을 의미합니까?
- 黄舟원래의
- 2017-07-19 14:39:232287검색
CSS에서 position:relative;가 무엇을 의미하고 무엇을 하는지 아직도 이해가 안 되나요?
위치의 다른 모든 속성을 이해합니다.
인용문
정적: 특별한 위치 지정이 없으며 개체는 HTML 위치 지정 규칙을 따릅니다.
절대: 문서 흐름에서 개체를 드래그하고 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타를 사용합니다. 절대 위치 지정을 위한 속성입니다. 그리고 계단식은 z-index 속성을 통해 정의됩니다. 이때 개체에는 여백이 없지만 여백과 테두리는 여전히 있습니다.
상대: 개체를 쌓을 수 없지만 왼쪽, 오른쪽, 위쪽, 아래쪽 등의 속성을 기준으로 일반적인 문서 흐름에서 오프셋됩니다.
수정됨: IE5.5 및 NS6은 아직 사용할 수 없습니다. 이 속성은 지원되지 않습니다.
문서에 언급된 여러 속성의 경우 상대 속성을 제외하고 다른 속성을 시도한 후에 효과가 표시됩니다. .
상대적 위치 지정이 아닙니다.
페이지의 정적 div#demo의 경우 이 #demo의 div#sub가 #demo를 기준으로 오른쪽 상단 모서리에 위치하도록 하려면 position:relative를 사용한 다음 Go to top을 추가해야 합니다. 그리고 그것을 제한할 권리가 있습니다.
제가 제대로 이해하고 있는 걸까요?
하지만 실제 개발을 하다 보면 기대했던 결과를 얻지 못하는 경우가 많습니다. 아직 이 속성을 완전히 이해하지 못했기 때문인 것 같습니다. 이제 나는 이것을 완전히 마스터하고 싶습니다. 위치:절대처럼 마스터하고 HTML 요소로 원하는 모든 작업을 수행하고 싶습니다.
이것을 이해하는 친구에게 알려주세요. 또는 정보나 링크 등을 제공해주세요.
감사합니다.
질문 보충:
제공해주신 링크에 감사드립니다. 하지만 위치:상대에 대한 자세한 이해를 얻기를 바랍니다.
보충 질문:
reeze, 좋은 지적을 하셨습니다.
그런데 이 속성을 선언하는 요소 자체의 위치 지정은 어떻게 되나요? 상단, 왼쪽, 오른쪽, 하단의 기능은 무엇입니까?
당신이 말하는 것은 상대적인 하위 요소의 동작입니다. 나는 그 자체에 대해 뭔가를 알고 싶습니다.
보충질문:
기본적인 설명을 해주지 않았나요?
"페이지의 정적 div#demo의 경우 이 #demo의 div#sub를 #demo를 기준으로 오른쪽 상단 모서리 어딘가에 배치하고 싶습니다. 이 position:relative를 사용한 다음 상단 및
제가 올바르게 이해하고 있습니까? "
먼저 의심스러운 점에 대해 답변해 드리겠습니다.
position의 기본값은 정적입니다. 즉, 모든 요소에 대해 position 속성이 정의되지 않은 경우 해당 위치: 정적)
이 #demo의 div #sub를 #demo를 기준으로 오른쪽 상단 모서리 어딘가에 배치하려면 #demo 상대 위치 지정, # sub 절대 위치 지정을 지정해야 합니다.
Absolute는 가장 가까운 상위 요소를 기준으로 배치됩니다. #demo를 상대적으로 배치하지 않으면 #sub의 절대 위치가 본문을 기준으로 배치됩니다.
relative는 자신을 기준으로 위치가 지정됩니다(예: #demo{position:relative;top:-50px;}). 그러면 #demo는 원래 위치를 기준으로 50px를 이동합니다.
또 다른: 상대는 문서 흐름에서 벗어나지 않으며, 절대는 문서 흐름에서 벗어나지 않습니다. 즉, 상대 요소가 원래 위치에서 벗어난 것처럼 보이지만 실제로는 문서 흐름에서 변경되지 않은 상태로 유지됩니다. 절대 요소는 위치를 변경할 뿐만 아니라 문서 흐름에서 벗어납니다.
다음과 같이 예시를 작성했습니다:
<!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>위 내용은 CSS에서 position:relative;는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!