차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_position [2021/03/12 17:31]
emblim98 만듦
+++ wiki:css:css_note:css_position [2023/01/13 18:44] (현재)
@@ 줄 76: / 줄 76: @@
 ====예제====
 <code html>
+<!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>static position</title>
+</head>
+<style>
+    div.relative {
+        position: relative;
+        left: 30px;
+        border: 3px solid #73ad21;
+    }
+</style>
+<body>
+    <h2>position: relative;</h2>
+    <p>An element with position: relative; is positioned relative to its normal position:</p>
+    <div class="relative">
+        This div element has position: relative;
+    </div>
+</body>
+</html>
+</code>
+\\
+\\
+=====position: fixed;=====
+''position: fixed''속성을 가진 요소는 뷰포트(viewport)에 상대적으로 배치됩니다.\\
+이것은 웹페이지가 스크롤되어도 항상 같은 자리에 고정되어 있다는 것을 의미합니다.\\
+top, right, bottom, left속성을 사용하여 요소를 배치합니다.\\
+\\
+고정 요소는 일반적으로 위치하는 웹페이지에 공백을 남기지 않습니다.\\
+\\
+웹페이지의 오른쪽 하단 모서리에 고정된 요소를 하기의 예제에서 확인하세요.\\
+====예제====
+<code html>
+<!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>position: fixed;</title>
+    <style>
+        div.fixed {
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            width: 300px;
+            border: 3px solid #73ad21;
+        }
+    </style>
+</head>
+<body>
+    <h2>position: fixed;</h2>
+    <p>
+        An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same
+        place even if the page is scrolled.
+    </p>
+    <div class="fixed">
+        This div element has position: fixed;
+    </div>
+</body>
+</html>
+</code>
+\\
+\\
+=====position: absolute;=====
+''position: absolute;''속성을 가진 요소는 fixed와 같이 뷰포트에 상대적으로 배치된 대신에 가장 가까이 위치한 조상에 상대적으로 배치됩니다.\\
+\\
+허자만 absolute 속성의 위치 요소가 배치된 조상을 가지고 있지 않는 경우, 문서 본문(documnt body)를 사용하고 페이지 스크롤과 함께 이동합니다.\\
+**Note: 위치 지정 요소는 위치가 static을 제외한 요소입니다.**\\
+\\
+====예제====
+<code html>
+<!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>position: absoulte;</title>
+    <style>
+        div.relative {
+            position: relative;
+            width: 400px;
+            height: 200px;
+            border: 3px solid #73ad21;
+        }
+        div.absolute {
+            position: absolute;
+            top: 80px;
+            right: 0;
+            width: 200px;
+            height: 100px;
+            border: 3px solid red;
+        }
+    </style>
+</head>
+<body>
+    <h2>position: absolute;</h2>
+    <p>
+        An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of
+        positioned rlative to the viewport, like fixed):
+    </p>
+    <div class="relative">
+        This div element has position: relative;
+        <div class="absolute">
+            This div element has position: absolute;
+        </div>
+    </div>
+</body>
+</html>
+</code>
+\\
+\\
+=====position: sticky;=====
+''position: sticky;''속성을 가진 요소는 사용자의 스크롤 위치에 기반하여 배치됩니다.\\
+\\
+sticky 요소는 스크롤 위치에 따라 ''relative'' 그리고 ''fixed''사이에서 전환됩니다.\\
+뷰포트에서 주어진 오프셋 위치에 도달할 때 까지 sticky 요소는 상대적으로 배치됩니다. \\
+그런 다음 자리에 고정됩니다.(position:fixed처럼)\\
+\\
+**Note: 인터넷 익스플로러는 sticky 포지셔닝을 지원하지 않습니다. 사파리는 -webkit- prefix가 필요합니다. sticky 포지셔닝이 작동하도록 초최소한 ''top'', ''right'', ''bottom'' 또는''left'' 들 중 하나는 지정을 해야 합니다.**\\
+하기의 예제에서 스크롤 위치에 도달하면 sticky 요소는 웹페이지의 상단에 고정됩니다.(''top: 0'')\\
+====예제====
+<code html>
+<!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>position: sticky;</title>
+    <style>
+        div.sticky {
+            position: -webkit-sticky;
+            position: sticky;
+            top: 0;
+            padding: 5px;
+            background-color: red;
+            border: 2px solid darkblue;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
+    <div class="sticky">I am sticky</div>
+    <div style="padding-bottom:2000px">
+        <p>
+            In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll
+            position.
+        </p>
+        <p>Scroll back up to remove the stickyness.</p>
+        <p>
+            Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
+            concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
+            Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
+        </p>
+        <p>
+            Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
+            concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
+            Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
+        </p>
+    </div>
+</body>
+</html>
+</code>
+\\
+\\
+=====Overlapping Elements=====
+요소들이 배치될 때, 다른 요소에 겹칠 수 있습니다.\\
+''z-indes''속성은 요소의 스택 순서를 지정합니다.(요소는 다른 요소들의 앞 또는 뒤에 배치되어야 합니다)\\
+\\
+하나의 요소는 양수 또는 음수 스택 순서를 가질 수 있습니다.\\
+<code html>
+<!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>Overlapping Elemnts</title>
+    <style>
+        img {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: -1;
+        }
+    </style>
+</head>
+<body>
+    <h1>This is a heading</h1>
+    <img src="w3css.gif" width="100" height="140">
+    <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
+</body>
+</html>
+</code>
+\\
+스택 순서가 더 큰 요소는 항상 스택 순서가 낮은 요소 앞에 있습니다.\\
+\\
+**Note: 지정된 ''z-index''없이 두 개의 배치 요소가 겹치는 경우, HTML 코드에서 마지막에 배치된 요소가 맨 위에 표시됩니다.**
+\\
+\\
+=====Positioning Text In an Image=====
+이미지 위에 텍스트를 배치하는 방법\\
+\\
+====예제====
+<code html>
+<!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>Text over Image</title>
+    <style>
+        .container {
+            position: relative;
+        }
+        .topleft {
+            position: absolute;
+            top: 8px;
+            left: 16px;
+            font-size: 30px;
+        }
+        .topright {
+            position: absolute;
+            top: 8px;
+            right: 16px;
+            font-size: 30px;
+        }
+        .centered {
+            position: absolute;
+            top: 50%;
+            width: 100%;
+            text-align: center;
+            font-size: 30px;
+        }
+        .bottomleft {
+            position: absolute;
+            bottom: 8px;
+            left: 16px;
+            font-size: 30px;
+        }
+        .bottomright {
+            position: absolute;
+            bottom: 8px;
+            right: 16px;
+            font-size: 30px;
+        }
+        img {
+            width: 100%;
+            height: auto;
+            opacity: 0.3;
+        }
+    </style>
+</head>
+<body>
+    <h2>Image Text</h2>
+    <p>Add some text to an image in the top left corner:</p>
+    <div class="container">
+        <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
+        <div class="topright">Top Left</div>
+        <div class="topleft">Top Right</div>
+        <div class="centered">Centered</div>
+        <div class="bottomleft">Bottom Left</div>
+        <div class="bottomright">Bottom Right</div>
+    </div>
+</body>
+</html>
+</code>
 {{tag>오션, CSS layout, position property  }}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구