CSS에서 위치:상대적 역할 소개
- 不言원래의
- 2018-07-02 09:32:553602검색
이 글에서는 CSS에서 position:relative의 역할을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.
CSS position: 상대 요소는 요소의 상대적 위치를 제어합니다. 상대 요소는 문서 흐름에서 벗어나지 않지만 절대 요소는 문서 흐름에서 벗어나는 것처럼 보이지만 실제로는 문서 흐름에서 변경되지 않습니다. 🎜 🎜#
Quote
static: 특별한 위치 지정 없음, 개체는 HTML 위치 지정 규칙을 따릅니다absolute: 문서 흐름 밖으로 개체를 드래그합니다. , 왼쪽, 오른쪽, 위쪽, 아래쪽과 같은 속성을 사용하여 절대 위치 지정에 사용됩니다. 그리고 계단식은 z-index 속성을 통해 정의됩니다. 이때 개체에는 여백이 없지만 여전히 패딩과 테두리가 있습니다.
relative : 개체는 쌓일 수 없지만 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 기반으로 일반적인 문서 흐름에서 오프셋됩니다.
fixed: IE5.5 및 NS6은 아직 이 속성을 지원하지 않습니다.
제대로 이해했나요? "
먼저 말씀드리겠습니다. 답변:
위치의 기본값은 정적입니다(즉, 모든 요소에 대해 위치 속성이 정의되지 않은 경우 해당 위치는 정적입니다).
이것을 원한다면 #데모 A p# 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;
}
p#demo{
position:relative;
border:1px solid #000;
margin:50px;
top:-50px;
line-height:18px;
overflow:hidden;
clear:both;
height:1%;
}
p#sub{
position:absolute;
right:10px;
top:10px;
}
p.relative{
position:relative;
left:400px;
top:-20px;
}
p.static,p.fixed,p.absolute,p.relative{
width:300px;
}
p.static{
background-color:#bbb;
position:static;
}
p.fixed{
background-color:#ffc0cb;
}
p.absolute{
background-color:#b0c4de;
}
p.relative{
background-color:#ffe4e1;
}
-->
</style>
</head>
<body>
<p id="demo">
<p class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </p>
<p id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </p>
<p class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </p>
<p class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </p>
</p>
</body>
</html> 위 내용은 이 글의 전체 내용이므로 모든 분들의 학습에 도움이 되기를 바랍니다. , 기타 관련 내용은 PHP 중국어 웹사이트에 주목하세요! 관련 권장사항:
position:fixed 속성을 사용하여 DIV를 중앙에 배치하는 방법
#🎜🎜 ##🎜 🎜#CSS3를 사용하여 머티리얼 디자인 효과 얻기
위 내용은 CSS에서 위치:상대적 역할 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!