집 > 기사 > 웹 프론트엔드 > CSS의 위치 속성 4개(고정 | 절대 | 상대 | 정적)에 대한 자세한 설명

CSS의 위치 속성 4개(고정 | 절대 | 상대 | 정적)에 대한 자세한 설명

怪我咯원래의: 2017-06-22 09:37:451236검색

먼저 CSS3의 위치 속성 관련 정의를 살펴보겠습니다.

static: 특별한 위치 지정이 없으며 개체는 일반적인 문서 흐름을 따릅니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 등의 속성은 적용되지 않습니다.
상대: 개체는 일반 문서 흐름을 따르지만 위쪽, 오른쪽, 아래쪽, 왼쪽 및 기타 속성을 기반으로 일반 문서 흐름에서 오프셋됩니다. 그리고 계단식은 z-index 속성을 통해 정의됩니다.
절대: 개체는 일반 문서 흐름에서 분리되며 절대 위치 지정을 위해 위쪽, 오른쪽, 아래쪽, 왼쪽 및 기타 속성을 사용합니다. 그리고 계단식은 z-index 속성을 통해 정의됩니다.
수정됨: 개체가 일반 문서 흐름에서 분리되어 창을 참조 지점으로 배치하려면 개체가 스크롤 막대와 함께 스크롤되지 않습니다. 그리고 계단식은 z-index 속성을 통해 정의됩니다.

어때요 아직도 헷갈리시나요~~ 상관없으니 몇 가지 기본 개념부터 하나씩 설명해드리겠습니다.

문서 흐름이란 무엇인가요?

양식을 위에서 아래로 행으로 나누고, 각 행의 요소를 왼쪽에서 오른쪽으로 배열하는 것이 문서 흐름입니다.

요소가 문서 흐름에서 벗어나게 하는 상황은 floating, 절대 위치 지정 및 상대 위치 지정 세 가지뿐입니다.

정적 위치 지정(정적):

정적이며 특별한 위치 지정이 없으며 html 요소의 기본 위치 지정 방법입니다. 즉, 요소의 위치 속성을 설정하지 않은 경우 기본 위치가 됩니다. 값은 정적이며 일반적인 문서 흐름 개체는 문서 공간을 차지합니다. 이 위치 지정 모드에서는 위쪽, 오른쪽, 아래쪽, 왼쪽 및 z-색인과 같은 속성이 유효하지 않습니다.

상대 위치 지정(relative):

상대 위치 지정이라고도 하는 상대 위치 지정을 문자 그대로 분석하면 이 속성의 주요 특성인 상대를 확인할 수 있습니다. 그러나 그것은 무엇과 관련이 있습니까? 이것은 중요한 점이자 나를 가장 혼란스럽게 하는 점입니다. 이제 모두가 이해할 것이라고 생각합니다. 첫 번째 요소의 위치 속성을 수정합니다.

/******初始*********/
<style type="text/css">
    #first { width: 200px; height: 100px; border: 1px solid red; }
    #second{ width: 200px; height: 100px; border: 1px solid blue;}
</style>
<body>
   <p id="first"> first</p>
   <p id="second">second</p>
</body>

20px의 상대 오프셋 이후:

-- >> 점선은 초기 위치 공간입니다.

이제 이해하셨겠지만,

상대 위치 지정은 상대적입니다. 는 문서 흐름의 원래 위치를 기준으로 오프셋

이며 상대 위치 지정도 일반적인 문서 흐름을 따르지만 문서 흐름에서 벗어나지 않지만 위쪽/왼쪽/오른쪽/아래 속성이 효과적이라는 것도 알고 있습니다. .정적에서 절대로의 중간 전환 속성이라고 할 수 있습니다. 가장 중요한 것은 문서 공간도 차지하며,

이 차지하는 문서 공간은 위쪽/오른쪽/으로 변경되지 않습니다. 왼쪽/아래쪽 등의 속성의 오프셋이 변경된다는 것은 그 뒤에 있는 요소가 점선 위치를 기준으로 배치된다는 의미입니다(위/왼쪽/오른쪽/아래 등의 속성이 적용되기 전).
좋습니다. 위쪽/오른쪽/왼쪽/아래쪽 속성은 상대 위치 요소가 차지하는 문서 공간을 상쇄하지 않으므로 여백/패딩이 문서 공간을 상쇄할까요? 대답은 '예'입니다. 함께 실험해 보겠습니다.

(3) 여백 속성 추가:

<style type="text/css">
    #first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/
    #second{width: 200px; height: 100px; border: 1px solid blue;}
</style>

여백 설정 후: 20px:

비교하면 매우 명확해집니다. 먼저 첫 번째를 설정하겠습니다. 요소의

margin

을 20px로 설정한 다음 두 번째 요소는 아래쪽으로 40px 오프셋을 적용해야 하므로 여백이 문서 공간을 차지합니다! 같은 방법으로 패딩 효과도 직접 테스트해볼 수 있어요!

절대 위치 지정(절대):

absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到100db36a723c770d327fc0aef2ce13b1标签为止，这里还需要注意的是，relative和static方式在最外层时是以6c04bd5ca3fcae76e30b72ad730ca86d标签为定位原点的，而absoulte方式在无父级是position非static定位时是以100db36a723c770d327fc0aef2ce13b1作为原点定位。100db36a723c770d327fc0aef2ce13b1和6c04bd5ca3fcae76e30b72ad730ca86d元素相差9px左右。我们来看下效果：

(4) 添加absoulte属性：

<html>
<style type="text/css">
    html{border:1px dashed green;}
    body{border:1px dashed  purple;}
    #first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
    #second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
</style>
<body>
  <p id="first">relative</p>
  <p id="second">absoult</p>
</body>
</html>

效果图：

哈哈，看了上面的代码后，细心的朋友肯定要问了，为什么absoulte定位要加 top:0; left:0; 属性，这不是多此一举呢？

其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~

少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：

如果top和bottom一同存在的话，那么只有top生效。
如果left和right一同存在的话，那么只有left生效。

既然absoulte是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：

(5) 在absoulte定位中添加margin / padding属性：

#first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}
#second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}
   
<p id="first">first
    <p id="second">second</p>
</p>

效果图：

看懂了，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。

Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

固定定位(fixed)：

fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。

z-index属性：

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

Note：使用static 定位或无position定位的元素z-index属性是无效的。

위 내용은 CSS의 위치 속성 4개(고정 | 절대 | 상대 | 정적)에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：코드에 CSS 위치 속성 적용다음 기사：코드에 CSS 위치 속성 적용