CSS의 위치 지정 및 레이아웃 세부 사항에 대한 심층 분석 및 이해-CSS 튜토리얼-php.cn

CSS의 위치 지정 및 레이아웃 세부 사항에 대한 심층 분석 및 이해

WBOY

풀어 주다： 2021-12-22 18:32:08

원래의

1775명이 탐색했습니다.

이 기사에서는 CSS 위치 지정 레이아웃에 대한 관련 지식을 제공하고, 상대 위치 지정, 절대 위치 지정, 고정 위치 지정이 무엇인지, 다양한 요소 속성과 용도, 기타 지식이 모든 사람에게 도움이 되기를 바랍니다.

CSS의 위치 지정 및 레이아웃 세부 사항에 대한 심층 분석 및 이해

1. 상대 위치 지정

1.1) 상대 위치 지정이란

상대 위치 지정: 상자의 위치를 원래 위치에 따라 지정할 수 있습니다(위치 설명자를 통해 구현됨).

위치 설명자:
왼쪽: 오른쪽으로 이동, 오른쪽은 왼쪽으로 이동, 위쪽은 아래로 이동, 아래쪽은 위로 이동
(내부 값이 음수인 경우 반대 방향으로 이동)

예:
원본:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style></head><body>
    <p>
    	<p></p>
    </p></body></html>

로그인 후 복사

CSS의 위치 지정 및 레이아웃 세부 사항에 대한 심층 분석 및 이해 p를 상대 위치로 설정:

p {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: relative;
    top: 50px;
    left: 50px;}

로그인 후 복사

CSS의 위치 지정 및 레이아웃 세부 사항에 대한 심층 분석 및 이해

1.2) 상대 위치의 속성 및 사용

Properties

상대 위치에 있는 요소는 기본적으로 여전히 원래 위치에 있습니다. 그것 단지 새로운 위치에서 렌더링되며 페이지의 다른 요소에는 영향을 주지 않습니다.

사용

요소의 위치를 미세 조정하는 데 사용됩니다.
상대 위치 지정 상자는 절대 위치 지정을 위한 참조 상자로 사용할 수 있습니다.

예:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        nav {
            width: 780px;
            height: 50px;
            margin: 40px auto;
        }

        nav ul {
            list-style: none;
        }

        nav ul li {
            float: left;
            width: 156px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        nav ul li a {
            display: block;
            width: 156px;
            height: 50px;
            background-color: lightcyan;
            color: #000;
            text-decoration: none;
        }

        nav ul li a:hover {
            border-top: 3px solid red;
        }
    </style></head><body>
    <nav>
        <ul>
            <li>
                <a href="#">导航一</a>
            </li>
            <li>
                <a href="#">导航二</a>
            </li>
            <li>
                <a href="#">导航三</a>
            </li>
            <li>
                <a href="#">导航四</a>
            </li>
            <li>
                <a href="#">导航五</a>
            </li>
        </ul>
    </nav></body></html>

로그인 후 복사

이 때 효과는 다음과 같습니다. 이: CSS의 위치 지정 및 레이아웃 세부 사항에 대한 심층 분석 및 이해 마우스를 위에 올리면 탐색 영역이 가라앉습니다 상대 위치를 설정하고 미세 조정한 후:

nav ul li a:hover {
    border-top: 3px solid red;
    position: relative;
    top: -3px;}

로그인 후 복사

CSS의 위치 지정 및 레이아웃 세부 사항에 대한 심층 분석 및 이해 이제 문제가 해결될 것입니다

2. 절대 위치 지정

2.1) 절대 위치 지정이란

절대 위치 지정: 상자는 좌표로 위치를 설명하며 자체 절대 위치를 갖습니다.

절대 위치 참조 상자: 절대 위치 상자는 상위 요소 중 위치 속성이 있는 가장 가까운 상자를 참조 지점으로 사용합니다.

이 상자는 대개 상대적인 위치에 있어서 "아들 아버지의 모습"이라고도 불립니다.

위치 설명자: 왼쪽: 왼쪽까지의 거리, 오른쪽: 오른쪽까지의 거리, 위쪽: 위쪽까지의 거리, 아래쪽: 아래쪽까지의 거리

예:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: absolute;
            width: 500px;
            height: 300px;
            left: 200px;
            top: 100px;
            background-color: antiquewhite;
        }
    </style></head><body>
    <p class="box">
    </p></body></html>

로그인 후 복사

2.2) 절대 위치 지정

절대적으로 배치된 상자는 수직으로 중앙에 배치됩니다:

.box {
	position: absolute;
	top: 50%;
	margin-top: -自己高度一半;}

로그인 후 복사

절대적으로 배치된 상자는 수평으로 중앙에 배치됩니다:

.box {
	position: absolute;
	left: 50%;
	margin-left: -自己宽度一半;}

로그인 후 복사

스태킹 순서 z-index 속성

절대적으로 배치된 요소의 겹침 설정 순서 . 는 단위가 없는 양의 정수입니다. 더 큰 값은 더 작은 값을 억제할 수 있습니다(즉, 더 큰 값이 상위 레이어에 표시됩니다)

예:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 100px;
            top: 100px;
            background-color: antiquewhite;
        }

        .box2 {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 200px;
            top: 200px;
            background-color: lightblue;
        }
    </style></head><body>
    <p class="box1"></p>
    <p class="box2"></p></body></html>

로그인 후 복사

이때 효과는 다음과 같습니다.

<br/>

로그인 후 복사

이때 box1을 상위 레이어에 표시하려면 z-index 속성을 설정합니다.

.box1 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: antiquewhite;
    z-index: 100;}.box2 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 200px;
    top: 200px;
    background-color: lightblue;
    z-index: 1;}

로그인 후 복사

효과 살펴보기: CSS의 위치 지정 및 레이아웃 세부 사항에 대한 심층 분석 및 이해

Usage

절대 위치 지정은 효과를 "덮고" "마스크"하는 데 사용됩니다 CSS 스프라이트와 함께 사용할 수 있습니다 JS와 결합하여 다음을 수행할 수 있습니다. 애니메이션 달성

3. 고정 위치 지정

3.1) 고정 위치 지정이란 무엇입니까

고정 위치 지정: 페이지가 어떻게 스크롤되더라도 항상 페이지를 참조 지점으로 사용하여 고정됩니다.

위치 설명자: 왼쪽: 왼쪽까지의 거리, 오른쪽: 오른쪽까지의 거리, 위쪽: 위쪽까지의 거리, 아래쪽: 아래쪽까지의 거리

.box {
	position: fixed;
	top: 100px;
	left: 100px;}

로그인 후 복사

3.2) 고정 위치 지정의 특성 및 사용

예 페이지를 탐색할 때 맨 위로 돌아가기 버튼과 같이 일부 요소는 항상 현재 페이지의 특정 위치에 나타나야 한다는 것을 인식하는 데 사용됩니다. 예:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            background-color: rgba(78, 209, 226, 0.5);
            
            cursor: pointer;
            font-size: 24px;
        }
    </style></head><body>
    <a class="box">^</a>
    <p>
        <img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
    </p>
    <p>
        <img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
    </p>
    <p>
        <img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
    </p></body></html>

로그인 후 복사

효과는 다음과 같습니다.

페이지가 하단에 도달한 경우 , 오른쪽 하단에 있는 맨 위로 돌아가기 버튼의 위치는 변경되지 않습니다.

CSS의 위치 지정 및 레이아웃 세부 사항에 대한 심층 분석 및 이해 관심이 있으시면 계속해서