웹 프런트 엔드 기사 : CSS의 위치

위치는 깊이있는 위치의 이해를 가기 전에, 우리는 표준 문서 레이아웃을 흘렸다 전에의 얘기하자, 상당히 복잡한 주제이다.
응용 프로그램 : 작은 광고 페이지는 UI의 상단으로 돌아갑니다.

1.Position 특성

타겟팅 : 상단 오른쪽, 하단 왼쪽, 속성은 요소의 최종 위치를 결정한다.

2. 고정 위치
고정 위치는 "문서 흐름에서 기본 표시 위치의 요소"을 의미한다. 변경 없음.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态定位</title>
    <style type="text/css">
        .positioned{
            position: static;
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="positioned">我是静态定位的元素</p>
</body>
</html>

무료 정보 및 교육 과정을받을 수 클릭

3. 상대 위치

요소의 상대적인 위치는 문서의 정상 위치 오프셋되지만, 다른 원소의 영향을 상쇄되지 않는다.
레퍼런스 포인트 : 왼쪽, 오른쪽, 소자의 하단 옵셋 상단 수 원래 위치를 찾을 수있다.

현상 :

   不脱离标准文档流，单独设置盒子相对定位之后，。不用top,left,right,bottom对元素进行偏移，那么与普通的盒子没什么区别。
    有压盖现象。用top,left,right,bottom对元素进行偏移之后，明显定位的元素的层级高于没有定位的元素(用top,left,right,bottom层级低)。

4. 절대 위치

그리고 표준 문서 플로우를 벗어나지 않고 요소들의 상대적 위치 및 절대 위치 요소는 문서 플로우 벗어나. 상자가 절대 위치를 설정하면, 문서의 표준 흐름에서 다음 요소가 공간을 차지하지 않는다. 절대적으로 가장 최근의 비 정적 상위 요소 위치에 대한 위치 요소. 하면 페이지의 왼쪽 상단 모서리에 대하여, 존재하지 않는 등의 상위 요소는 루트 요소를 찾습니다.
무료 정보 및 교육 과정을받을 수 클릭

기준점 :

 相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面左上角进行定位。

5. 응용 프로그램

일반적으로 "자식해야 상위 단계"에 대한 상자의 상대 위치, 기준 레이아웃 패턴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            background-color:red;
            position: relative;
        }
        div .c1{
            width: 200px;
            height: 200px;
            background-color:blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        div .c2{
            width: 100px;
            height: 100px;
            background-color:greenyellow;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1">子1</div>
        <div class="c2">子2</div>

    </div>
</body>
</html>
子绝父相

6.z - 인덱스 :
무료 정보 및 코스받을 클릭
Z- 인덱스는 다음과 같은 규칙이 있습니다 :

Z- 색인은 위치 결정 소자 기본 Z- 색인에서 사용된다 : 자동;

      z-index取值为整数，数值越大，它的层级越高。
     如果元素设置了定位，没有设置z-index,那么谁写在后面的表示谁层级越高。
   从父现象，通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。

웹 프런트 엔드 기사 : CSS의 위치

1.Position 특성

추천