CSS의 position 속성과 z-index 속성에 대한 자세한 그래픽 설명-CSS 튜토리얼-php.cn

이번에는 CSS의 position 속성과 z-index 속성에 대한 자세한 그래픽 설명을 가져왔습니다. position 속성과 z-index 속성을 사용할 때 주의사항은 무엇인가요?

웹 디자인에서는 위치 속성의 사용이 매우 중요합니다. 때때로 우리가 이 속성을 명확하게 이해하지 못하면 예상치 못한 많은 어려움을 겪게 됩니다.

위치 속성에는 정적, 고정, 상대 및 절대의 네 가지 위치 지정 방법이 있습니다. 마지막으로 position 속성과 밀접한 관련이 있는 z-index 속성을 소개하겠습니다.

1부: position: static

정적 위치 지정은 HTML 요소의 기본값입니다. 즉, 위치 지정이 없으며 요소가 일반 흐름에 나타나므로 이 위치 지정은 상위 항목을 받지 않습니다. , 하단, 왼쪽과 오른쪽의 영향.

예를 들어 HTML 코드는 다음과 같습니다.

<p class="wrap">
    <p class="content"></p>
</p>

로그인 후 복사

css 코드는 다음과 같습니다.

.wrap{width: 300px;height: 300px; background: red;}
.content{position: static; top:100px; width: 100px;height: 100px; background: blue;}

로그인 후 복사

렌더링은 다음과 같습니다.

정적 및 상단이 설정되었음에도 불구하고 요소는 여전히 정상적인 흐름.

2부: 고정 위치 지정

고정 위치 지정은 요소의 위치가 브라우저 창을 기준으로 고정된 위치임을 의미합니다. 창이 스크롤되더라도 스크롤되지 않고 고정 위치 지정이 위치를 결정합니다. 문서와 일치하는 요소 흐름에 구애받지 않으므로 공간을 차지하지 않으며 다른 요소와 겹칩니다.

html 코드는 다음과 같습니다.

<p class="content">我是使用fix来定位的！！！所以我相对于浏览器窗口，一直不动。</p>

로그인 후 복사

css 코드는 다음과 같습니다.

body{height:1500px; background: green; font-size: 30px; color:white;}
.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}

로그인 후 복사

렌더링은 다음과 같습니다.

즉, 오른쪽 하단의 p는 광고처럼 절대 움직이지 않습니다. 자주 뜨는 것! ! !

주목할 가치가 있습니다. 고정 위치 지정은 IE7 및 IE8에서 설명되어야 합니다! DOCTYPE만 지원될 수 있습니다.

3부: 상대 위치 지정

상대적으로 위치가 지정된 요소의 위치 지정은 자체 일반 위치를 기준으로 합니다.

Key: 자체 좌표를 이해하는 방법은 무엇입니까?

이러한 예를 살펴보겠습니다. hmtl은 다음과 같습니다.

<h2>这是位于正常位置的标题</h2>
<h2 class="pos_bottom">这个标题相对于其正常位置向下移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

로그인 후 복사

css 코드는 다음과 같습니다.

.pos_bottom{position:relative; bottom:-20px;}
.pos_right{position:relative;left:50px;}

로그인 후 복사

렌더링은 다음과 같습니다.

즉, 하단:-20px;; . 왼쪽:50px;오른쪽으로 이동합니다.

다음과 같이 이해될 수 있습니다: 이동 후, 이동 전의 부정적인 위치입니다.

예를 들어 위의 예에서 이동 후 하단은 이동 전 20px입니다. 즉, 이동 후 하단은 이동 전 20px입니다.

또 다른 예: 왼쪽: 50px ; 이동 후 이동 전 왼쪽은 -50px입니다. 즉, 이동 후 오른쪽은 50px입니다.

즉, 이동 후 및 이동 전: 값이 음수이면 정수로 직접 변경되고, 값이 정수이면 상대 방향이 직접 변경됩니다.

이제 상대 이동이 어떻게 이루어지는지 파악했으니 이동 후 다른 효과가 있는지 살펴보겠습니다.

html 코드는 다음과 같습니다.

<h2>这是一个没有定位的标题</h2>
<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>

로그인 후 복사

css 코드는 다음과 같습니다.

h2.pos_top{position:relative;top:-35px;}

로그인 후 복사

렌더링은 다음과 같습니다.

앞서 설명에 따르면 값이 음수인 경우 top:-35px; 즉, 이동 후 이동을 기준으로 양수로 직접 변경됩니다. 이동하기 전에 위쪽으로 35px만큼 오프셋됩니다. 이동 후에는 내용이 있더라도 위의 요소와 겹칩니다. 상대 요소가 이동하더라도 예약된 공간이 있는 요소는 여전히 일반 흐름으로 유지됩니다. 즉, 상대 이동 후에는 아래의 다른 요소에 영향을 주지 않습니다.

4부: 절대 위치 지정

절대 위치 지정 요소는 가장 가까운 위치에 있는 상위 요소를 기준으로 합니다. 요소에 위치 지정 상위 요소가 없으면 위치는 을 기준으로 합니다.

다음은 몇 가지 예입니다.

예 1:

<title>绝对定位</title>
<style>                body{background:green;}
    .parent{ width: 500px;height: 500px;background: #ccc;}
    .son{ width: 300px;height: 300px;background: #aaa;}
    span{position: absolute; right: 30px; background: #888;}
</style>
<p class="parent">
    <p class="son">
        <span>什么？</span>
    </p>
</p>

로그인 후 복사

效果如下：

即我只在span中设置了position:absolute；而在其父元素中都没有，于是它的位置是相对于html的。

例2:

.son{position: relative; width: 100px;height: 100px;background: #aaa; }

로그인 후 복사

相较于上一个例子，我只修改了class为son的元素的css，设置为position：relative；效果图如下：

于是，我们发现现在span的位置是相对于设有position属性的class为son的父元素的。

例3：

.parent{position: absolute; width: 300px;height: 300px;background: #ccc;}

로그인 후 복사

这个例子我只是修改了第一个例子中的css--设置了position:absolute；效果如下：

于是我们发现，现在span的定位是相对于具有position:absolute的属性的class为parent的父元素。

例4：

.parent{position:fixed; width: 300px;height: 300px;background: #ccc;}

로그인 후 복사

相对于例1，我添加了fixed的position属性，发现结果和例3是一模一样的。

例5：

.parent{position:static; width: 300px;height: 300px;background: #ccc;}

로그인 후 복사

相对于例1，我添加了static的position属性（即html的默认属性），结果和例1是一样的。

综上所述，当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位。

第五部分：重叠的元素--z-index属性

首先声明：z-index只能在position属性值为relative或absolute或fixed的元素上有效。

基本原理是：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

下面我们通过几个例子继续来理解这个属性。

例1：

　　即son1和son2是parent的两个子元素，效果图如下：

这是没有使用z-index，我们发现son2在son1之上，这是因为son2在html中排在了son1之后，所以后来者将前者覆盖，如果我们颠倒以下两者的顺序，就会发现蓝色(son1)在上了。

例2：

在son1中加入z-index：1；可以发现效果如下：

也就是说son2的index值是小于1的。

如果我们给son2也加上z-index:1;呢？结果得到黄色(son2)就在上面了。（因为一旦z-index值相等，情况就和都不设置index值一样了）

例3：

在son2中加入z-index:5;可以发现效果如下：

即黄色(son2)又在上面了，这个很简单，不作过多讨论。

例4：

在父元素添加z-index:10;

在son1和son2添加z-index:5; 这样理论上父元素就会在上面（黄色覆盖蓝色和黄色）；

结果如下：

结果没有变!!!!! 这就说明父元素和子元素不能做z-index的比较！！！但真的是这样吗？看下一个例子：

例5：

把两个子元素的z-index值同时设置为-5；父元素不设置z-index属性。结果如下：

성공! ! 이는 상위 요소와 하위 요소 간에 여전히 비교가 가능함을 보여줍니다! ! ! 자식 요소의 z-index 값을 음수로 설정하기만 하면 됩니다.

예제 6:

예제 5를 기반으로 상위 요소에 z-index: 10을 추가하면 이해가 됩니다~ 예 5와 동일한 결과를 얻을 수 있어야 합니다! !

.... 부모 요소의 z-index 값을 설정할 수 없는 것 같습니다. 그렇지 않으면 원하는 효과가 나타나지 않습니다. 또 다른 흥미로운 예를 살펴보겠습니다.

예제 7:

예제 6의 경험을 바탕으로 상위 요소의 값을 설정하지 않았습니다. 이제 son1(파란색)의 z-index를 5로 설정하고 z-index를 설정합니다. son2 ~ -5 중 아래 결과를 살펴보세요.

즉, son1이 맨 위에 있고 상위 요소가 중간에 있고 son2가 맨 아래에 있습니다.

이제 Z-index 탐색은 끝인가요? ? 물론 그렇지 않습니다. 아래에서 좀 더 흥미로운 예를 살펴보겠습니다.

예제 8:

코드는 다음과 같습니다.

효과는 다음과 같습니다.

parent1과 parent2는 각각 son1과 son2의 상위 요소이지만 이전 이해에 따르면 상위 요소는 Z-색인 값을 추가할 수 없습니다. 그렇지 않으면 오류가 발생합니다. 하지만 여기서 parent1과 parent2는 본문에 상대적인 하위 요소이므로 동일한 수준에 있으므로 비교할 수 있습니다. 그리고 이때 parent1의 자식 요소 son1(파란색)이 맨 위에 있습니다.

예제 9:

예제 7을 기준으로 parent2의 z-index 값을 20으로 설정하면 다음과 같은 효과를 볼 수 있습니다.