CSS의 포지셔닝: 당신이 알아야 할 모든 것
다음과 같은 5가지 유형의 포지셔닝이 있습니다.
(1) 정적 위치 지정
다음 코드는 어떤 내용도 변경하지 않습니다. 기본적으로 위치가 '정적' 으로 설정되어 있고, 'p' 는 블록 요소이기 때문에 모든 상자가 전체 줄을 덮어쓰고 다음 상자가 다음 줄에 나타납니다.
<!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>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
background-color: chocolate;
position: static;
}
#box4{
left: 100px;
}
</style>
</head>
<body>
<p class="box" id="box1"></p>
<p class="box" id="box2"></p>
<p class="box" id="box3"></p>
<p class="box" id="box4"></p>
</body>
</html>
(2) 상대적 포지셔닝
상대적인 포지셔닝을 효과적으로 하기 위해서, 우리는 반드시 맨 위, 맨 아래, 왼쪽, 오른쪽 속성을 사용해야 한다.예를 들어 아래 코드에서 나는box4에'left'속성을 사용했기 때문에box4는 왼쪽에서 100px의 경계를 남겼다.
<!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>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
background-color: chocolate;
}
#box4{
left: 100px;
position: relative;
}
</style>
</head>
<body>
<p class="box" id="box1"></p>
<p class="box" id="box2"></p>
<p class="box" id="box3"></p>
<p class="box" id="box4"></p>
</body>
</html>
우리는 또한 이 속성을 사용하여 두 상자를 한데 합칠 수 있다.예를 들어 네모난 상자 4의'bottom'을 100px로 설정하면, 밑에 100px의 경계를 남기고 box3과 합친다. (box3과 box4 사이에 경계가 있기 때문에 정확하게 중첩되지 않는다.)
<!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>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
background-color: chocolate;
}
#box4{
bottom: 100px;
position: relative;
}
</style>
</head>
<body>
<p class="box" id="box1"></p>
<p class="box" id="box2"></p>
<p class="box" id="box3"></p>
<p class="box" id="box4"></p>
</body>
</html>
(3) 절대 포지셔닝
상대 위치에서 현재 문서 흐름에 비해 요소가 이동하는 것을 보았습니다.그러나 절대 위치에서 문서 흐름은 더 이상 존재하지 않고 요소는 주체나 직접 부모 요소의 측면을 기준으로 이동한다.
이 기능은 유용합니다. 즉, 팝업 메시지 상자, 제어 메뉴 등과 같은 페이지의 다른 요소의 레이아웃을 방해하지 않는 별도의 UI 기능을 만들 수 있습니다.
지금부터 절대적인 위치에서 몸보다 어떻게 움직이는지 알아보자.
다음 예시에서 box4는 box1과 통합됩니다. 왜냐하면 box4와 부모 요소 바디 사이의 거리는 0px이고 box1과 같기 때문입니다.
중첩될 때, 포지셔닝된 요소가 포지셔닝되지 않은 요소보다 낫다.
<!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>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border-style: solid;
border-color: black;
background-color: chocolate;
}
#box4{
position: absolute;
top: 0px;
}
</style>
</head>
<body>
<p class="box" id="box1"></p>
<p class="box" id="box2"></p>
<p class="box" id="box3"></p>
<p class="box" id="box4"></p>
</body>
</html>
이제 원소가 직접 부모 원소에 비해 어떻게 이동하는지 알아보자.
우리의 원소가 실체가 아닌 부모 원소에 비해 이동하도록 하기 위해서, 부모 원소에'position:relative '를 주어야 합니다. 그렇지 않으면 기본적으로 실체에 대해서만 이동합니다.
다음 코드에서, 우리는div를 모든 상자를 포함하는 부모 요소로 하고,box40px를div의 오른쪽에서 이동합니다.
<!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>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
background-color: chocolate;
}
#box4{
position: absolute;
top: 0px;
right: 0px;
}
div{
background-color: blue;
width: 400px;
position: relative;
}
</style>
</head>
<body>
<div>
<p class="box" id="box1"></p>
<p class="box" id="box2"></p>
<p class="box" id="box3"></p>
<p class="box" id="box4"></p>
</div>
</body>
</html>
현재, div에'position:relative '를 지정하지 않고 코드 편집기에서 box4를 이동해 보십시오.너희는 그것이 여전히 몸에 비해 움직이는 것을 보게 될 것이다.해봐.
이 점을 기억하라. 상대적인 상황에서 원소는 정상적인 흐름에 비해 이동하고, 절대적인 상황에서 원소는 그것을 포함하는 주체나 부모 원소의 측면에 비해 이동한다.
(4) 고정 위치
여기서 요소의 위치는 브라우저 창을 기준으로 고정됩니다.이것은 우리가 얼마나 굴러도 원소는 변하지 않는다는 것을 의미한다.
즉, 페이지를 아무리 스크롤해도 항상 볼 수 있는 영구 탐색 메뉴와 같은 고정된 유용한 UI 항목을 만들 수 있습니다.
<!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>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
background-color: chocolate;
}
#box4{
position: fixed;
top: 0px;
left: 150px;
}
div{
background-color: blue;
height: 5000px;
}
</style>
</head>
<body>
<div>
<p class="box" id="box1"></p>
<p class="box" id="box2"></p>
<p class="box" id="box3"></p>
<p class="box" id="box4"></p>
</div>
</body>
</html>
(5) 접착성 포지셔닝:
또 다른 사용 가능한 위치 값을'sticky'라고 하는데 다른 값보다 약간 새롭다.이것은 기본적으로 상대적인 위치와 고정된 위치의 혼합이다.이것은 특정한 한도값으로 굴러갈 때까지 상대적인 원소처럼 운행할 수 있도록 합니다. 그러면 고정됩니다.
예를 들어, 내비게이션 표시줄을 페이지와 함께 특정한 점으로 스크롤한 다음, 페이지 맨 위에 붙일 수 있다.
이것은 좀 까다롭다.우리는 하나의 예로 그것을 이해한다.
<!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>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
background-color: chocolate;
}
#box4{
position: sticky;
top: 0px;
left: 150px;
}
div{
background-color: blue;
height: 5000px;
}
</style>
</head>
<body>
<div>
<p class="box" id="box1"></p>
<p class="box" id="box2"></p>
<p class="box" id="box3"></p>
<p class="box" id="box4"></p>
</div>
</body>
</html>
위의 예시에서 우리는 '고정' 을 '접착' 으로 바꾸면 상자가 보이는 창보다 이동하는 것이 아니라 실제 데이터보다 이동하는 것을 볼 수 있다.그러나, 우리가 아래로 스크롤할 때, 그것은 브라우저 창에 비해 끊겨서, 아무리 낮게 스크롤해도 거기에 고정된다.
이 블로그를 쓰는 데 많은 시간과 정력을 들였다.
나는 네가 이 문장을 좋아하길 바란다.좋아해요!
나는 매일 인터넷 개발에 관한 글을 한 편 쓴다.만약 당신도 dev.to와 트위터에서 공부한다면 저를 주목해 주세요.
내 트위터 핸들:
링크디딘 타입이라면 연결해 주십시오.
좋은 하루 되세요.😀!
Reference
이 문제에 관하여(CSS의 포지셔닝: 당신이 알아야 할 모든 것), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/therajatg/positioning-in-css-everything-you-need-to-know-fkj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
