{"id":1230,"date":"2025-03-06T18:30:00","date_gmt":"2025-03-06T09:30:00","guid":{"rendered":"https:\/\/seuheu.com\/?p=1230"},"modified":"2025-03-04T10:55:50","modified_gmt":"2025-03-04T01:55:50","slug":"html-css-css%ec%97%90%ec%84%9c-position-absolute%ec%99%80-position-relative%ec%9d%98-%ea%b4%80%ea%b3%84","status":"publish","type":"post","link":"https:\/\/seuheu.com\/?p=1230","title":{"rendered":"[HTML &amp; CSS] CSS\uc5d0\uc11c position: absolute\uc640 position: relative\uc758 \uad00\uacc4"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p><br><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\ubaa9\ucc28<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\ubaa9\ucc28 \ud1a0\uae00\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/seuheu.com\/?p=1230\/#1_position_absolute%EB%9E%80\" >1. position: absolute\ub780?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/seuheu.com\/?p=1230\/#2_%EB%B6%80%EB%AA%A8_%EC%9A%94%EC%86%8C%EC%97%90_position_relative%EB%A5%BC_%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94_%EC%9D%B4%EC%9C%A0\" >2. \ubd80\ubaa8 \uc694\uc18c\uc5d0 position: relative\ub97c \uc124\uc815\ud558\ub294 \uc774\uc720<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/seuheu.com\/?p=1230\/#%EB%B6%80%EB%AA%A8%EC%97%90_relative%EA%B0%80_%EC%97%86%EC%9C%BC%EB%A9%B4\" >\ubd80\ubaa8\uc5d0 relative\uac00 \uc5c6\uc73c\uba74?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/seuheu.com\/?p=1230\/#3_position_absolute%EC%99%80_position_relative%EC%9D%98_%EA%B4%80%EA%B3%84_%EC%A0%95%EB%A6%AC\" >3. position: absolute\uc640 position: relative\uc758 \uad00\uacc4 \uc815\ub9ac<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/seuheu.com\/?p=1230\/#4_absolute_%EC%82%AC%EC%9A%A9_%EC%8B%9C_%EC%A3%BC%EC%9D%98%ED%95%A0_%EC%A0%90\" >4. absolute \uc0ac\uc6a9 \uc2dc \uc8fc\uc758\ud560 \uc810<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/seuheu.com\/?p=1230\/#4-1_%EB%B6%80%EB%AA%A8_%EC%9A%94%EC%86%8C%EC%97%90_height%EA%B0%80_%EC%97%86%EC%9D%84_%EB%95%8C\" >4-1. \ubd80\ubaa8 \uc694\uc18c\uc5d0 height\uac00 \uc5c6\uc744 \ub54c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/seuheu.com\/?p=1230\/#5_absolute%EC%99%80_relative%EB%A5%BC_%ED%99%9C%EC%9A%A9%ED%95%9C_%EC%98%88%EC%A0%9C\" >5. absolute\uc640 relative\ub97c \ud65c\uc6a9\ud55c \uc608\uc81c<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/seuheu.com\/?p=1230\/#5-1_%EC%9A%B0%EC%B8%A1_%ED%95%98%EB%8B%A8%EC%97%90_%EB%B2%84%ED%8A%BC_%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0\" >5-1. \uc6b0\uce21 \ud558\ub2e8\uc5d0 \ubc84\ud2bc \uace0\uc815\ud558\uae30<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/seuheu.com\/?p=1230\/#6_%EA%B2%B0%EB%A1%A0\" >6. \uacb0\ub860<\/a><\/li><\/ul><\/nav><\/div>\n<br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_position_absolute%EB%9E%80\"><\/span>1. position: absolute\ub780?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>CSS\uc5d0\uc11c <code>position: absolute<\/code>\ub97c \uc801\uc6a9\ud558\uba74 \ud574\ub2f9 \uc694\uc18c\ub294 <strong>\ubb38\uc11c \ud750\ub984\uc5d0\uc11c \uc81c\uac70<\/strong>\ub418\uba70, \ud2b9\uc815 \uae30\uc900\uc810\uc744 \uae30\uc900\uc73c\ub85c \ubc30\uce58\ub429\ub2c8\ub2e4.<br>\uc774\ub54c \uae30\uc900\uc810\uc774 \ub418\ub294 \uc694\uc18c\ub294 <strong>\uac00\uc7a5 \uac00\uae4c\uc6b4 <\/strong><code><strong>position<\/strong><\/code><strong>\uc774 \uc9c0\uc815\ub41c(\uc989, <\/strong><code><strong>relative<\/strong><\/code><strong>, <\/strong><code><strong>absolute<\/strong><\/code><strong>, <\/strong><code><strong>fixed<\/strong><\/code><strong> \uc911 \ud558\ub098\uc778) \ubd80\ubaa8 \uc694\uc18c<\/strong>\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<p>\ub9cc\uc57d \ubd80\ubaa8 \uc694\uc18c\uac00 <code>position: static<\/code>(\uae30\ubcf8\uac12)\uc774\ub77c\uba74, <code>absolute<\/code> \uc694\uc18c\ub294 <code>&lt;html&gt;<\/code> \uc694\uc18c(\uc989, \ubb38\uc11c \uc804\uccb4)\ub97c \uae30\uc900\uc73c\ub85c \ubc30\uce58\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".parent {\n  width: 300px;\n  height: 300px;\n  background-color: lightblue;\n}\n\n.child {\n  position: absolute;\n  top: 50px;\n  left: 50px;\n  width: 100px;\n  height: 100px;\n  background-color: red;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.parent<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">300px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">300px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">lightblue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.child<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">position<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">absolute<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">top<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">50px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">left<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">50px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">100px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">100px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">red<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<div class=&quot;parent&quot;&gt;\n  <div class=&quot;child&quot;&gt;<\/div&gt;\n<\/div&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;parent&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;child&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\uc774 \uacbd\uc6b0 <code>.child<\/code> \uc694\uc18c\ub294 \ubb38\uc11c \uc804\uccb4\ub97c \uae30\uc900\uc73c\ub85c <code>top: 50px<\/code>, <code>left: 50px<\/code> \uc704\uce58\uc5d0 \ubc30\uce58\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%EB%B6%80%EB%AA%A8_%EC%9A%94%EC%86%8C%EC%97%90_position_relative%EB%A5%BC_%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94_%EC%9D%B4%EC%9C%A0\"><\/span>2. \ubd80\ubaa8 \uc694\uc18c\uc5d0 position: relative\ub97c \uc124\uc815\ud558\ub294 \uc774\uc720<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\ubd80\ubaa8 \uc694\uc18c\uc5d0 <code>position: relative<\/code>\ub97c \uc124\uc815\ud558\uba74, <strong>\ud574\ub2f9 \ubd80\ubaa8\uac00 \uc790\uc2dd \uc694\uc18c\uc758 \uae30\uc900\uc810\uc774 \ub429\ub2c8\ub2e4<\/strong>.<br>\uc989, <code>absolute<\/code> \uc694\uc18c\ub294 \ubb38\uc11c\uac00 \uc544\ub2cc \ubd80\ubaa8 \uc694\uc18c\ub97c \uae30\uc900\uc73c\ub85c \ubc30\uce58\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".parent {\n  position: relative; \/* \ubd80\ubaa8 \uc694\uc18c\ub97c \uae30\uc900\uc810\uc73c\ub85c \ub9cc\ub4e6 *\/\n  width: 300px;\n  height: 300px;\n  background-color: lightblue;\n}\n\n.child {\n  position: absolute;\n  top: 50px;\n  left: 50px;\n  width: 100px;\n  height: 100px;\n  background-color: red;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.parent<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">position<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">relative<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #6A9955\">\/* \ubd80\ubaa8 \uc694\uc18c\ub97c \uae30\uc900\uc810\uc73c\ub85c \ub9cc\ub4e6 *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">300px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">300px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">lightblue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.child<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">position<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">absolute<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">top<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">50px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">left<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">50px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">100px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">100px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">red<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<div class=&quot;parent&quot;&gt;\n  <div class=&quot;child&quot;&gt;<\/div&gt;\n<\/div&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;parent&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;child&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\uc774\uc81c <code>.child<\/code> \uc694\uc18c\ub294 <code>.parent<\/code> \uc694\uc18c\ub97c \uae30\uc900\uc73c\ub85c <code>top: 50px<\/code>, <code>left: 50px<\/code> \uc704\uce58\uc5d0 \ubc30\uce58\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%EB%B6%80%EB%AA%A8%EC%97%90_relative%EA%B0%80_%EC%97%86%EC%9C%BC%EB%A9%B4\"><\/span>\ubd80\ubaa8\uc5d0 relative\uac00 \uc5c6\uc73c\uba74?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\ubd80\ubaa8 \uc694\uc18c\uac00 <code>position: static<\/code>\uc774\uba74 <code>.child<\/code> \uc694\uc18c\ub294 <code>&lt;html&gt;<\/code>\uc744 \uae30\uc900\uc73c\ub85c \ubc30\uce58\ub429\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 \uc815\ud655\ud788 \ubc30\uce58\ud558\ub824\uba74 \ubd80\ubaa8 \uc694\uc18c\uc5d0 <code>position: relative<\/code>\ub97c \ucd94\uac00\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_position_absolute%EC%99%80_position_relative%EC%9D%98_%EA%B4%80%EA%B3%84_%EC%A0%95%EB%A6%AC\"><\/span>3. position: absolute\uc640 position: relative\uc758 \uad00\uacc4 \uc815\ub9ac<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>\uc790\uc2dd \uc694\uc18c<br>(<code>position: absolute<\/code>)<\/th><th>\ubd80\ubaa8 \uc694\uc18c<br>(<code>position<\/code>)<\/th><th>\uae30\uc900\uc810<\/th><\/tr><tr><td><code>absolute<\/code><\/td><td><code>static<\/code> (\uae30\ubcf8\uac12)<\/td><td><code>&lt;html&gt;<\/code>(\ubb38\uc11c \uc804\uccb4)<\/td><\/tr><tr><td><code>absolute<\/code><\/td><td><code>relative<\/code><\/td><td>\ubd80\ubaa8 \uc694\uc18c<\/td><\/tr><tr><td><code>absolute<\/code><\/td><td><code>absolute<\/code><\/td><td>\ubd80\ubaa8 \uc694\uc18c<\/td><\/tr><tr><td><code>absolute<\/code><\/td><td><code>fixed<\/code><\/td><td>\ubdf0\ud3ec\ud2b8(\ud654\uba74)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\uc989, <strong>\ubd80\ubaa8\uc5d0 <\/strong><code><strong>relative<\/strong><\/code><strong>\ub97c \uc8fc\uba74 <\/strong><code><strong>absolute<\/strong><\/code><strong> \uc694\uc18c\uac00 \ud574\ub2f9 \ubd80\ubaa8\ub97c \uae30\uc900\uc73c\ub85c \ubc30\uce58\ub418\ub294 \uac83<\/strong>\uc774 \ud575\uc2ec\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_absolute_%EC%82%AC%EC%9A%A9_%EC%8B%9C_%EC%A3%BC%EC%9D%98%ED%95%A0_%EC%A0%90\"><\/span>4. absolute \uc0ac\uc6a9 \uc2dc \uc8fc\uc758\ud560 \uc810<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><br><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4-1_%EB%B6%80%EB%AA%A8_%EC%9A%94%EC%86%8C%EC%97%90_height%EA%B0%80_%EC%97%86%EC%9D%84_%EB%95%8C\"><\/span>4-1. \ubd80\ubaa8 \uc694\uc18c\uc5d0 height\uac00 \uc5c6\uc744 \ub54c<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\ubd80\ubaa8 \uc694\uc18c\uac00 <code>position: relative<\/code>\uc9c0\ub9cc <code>height<\/code>\ub97c \uc9c0\uc815\ud558\uc9c0 \uc54a\uc73c\uba74, \ub0b4\ubd80 absolute \uc694\uc18c\uac00 \ubd80\ubaa8\uc758 \ud06c\uae30\ub97c \uacb0\uc815\ud558\uc9c0 \uc54a\uc73c\ubbc0\ub85c \uc758\ub3c4\ud55c \ub300\ub85c \ubc30\uce58\ub418\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".parent {\n  position: relative;\n  background-color: lightblue;\n}\n\n.child {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 100px;\n  height: 100px;\n  background-color: red;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.parent<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">position<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">relative<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">lightblue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.child<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">position<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">absolute<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">bottom<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">right<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">100px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">100px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">red<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<div class=&quot;parent&quot;&gt;\n  <div class=&quot;child&quot;&gt;<\/div&gt;\n<\/div&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;parent&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;child&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\uc774 \uacbd\uc6b0 <code>.parent<\/code> \uc694\uc18c\uc5d0 <code>height<\/code>\uac00 \uc9c0\uc815\ub418\uc9c0 \uc54a\uc73c\uba74, <code>.child<\/code>\uac00 \uc758\ub3c4\ud55c \ub300\ub85c \ubc30\uce58\ub418\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<p>\u2705 <strong>\ud574\uacb0 \ubc29\ubc95:<\/strong> \ubd80\ubaa8 \uc694\uc18c\uc5d0 <code>height<\/code> \uac12\uc744 \uba85\uc2dc\uc801\uc73c\ub85c \uc124\uc815\ud558\uac70\ub098, \ub0b4\ubd80 \uc694\uc18c\ub4e4\uc758 \ub192\uc774\ub97c \uae30\ubc18\uc73c\ub85c \uc790\ub3d9\uc73c\ub85c \uc124\uc815\ub418\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_absolute%EC%99%80_relative%EB%A5%BC_%ED%99%9C%EC%9A%A9%ED%95%9C_%EC%98%88%EC%A0%9C\"><\/span>5. absolute\uc640 relative\ub97c \ud65c\uc6a9\ud55c \uc608\uc81c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><br><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5-1_%EC%9A%B0%EC%B8%A1_%ED%95%98%EB%8B%A8%EC%97%90_%EB%B2%84%ED%8A%BC_%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0\"><\/span>5-1. \uc6b0\uce21 \ud558\ub2e8\uc5d0 \ubc84\ud2bc \uace0\uc815\ud558\uae30<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".container {\n  position: relative;\n  width: 300px;\n  height: 300px;\n  background-color: lightgray;\n}\n\n.button {\n  position: absolute;\n  bottom: 10px;\n  right: 10px;\n  padding: 10px;\n  background-color: blue;\n  color: white;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.container<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">position<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">relative<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">300px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">300px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">lightgray<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">position<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">absolute<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">bottom<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">10px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">right<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">10px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">padding<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">10px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">blue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">white<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<div class=&quot;container&quot;&gt;\n  <button class=&quot;button&quot;&gt;\ubc84\ud2bc<\/button&gt;\n<\/div&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;container&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">button<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;button&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">\ubc84\ud2bc<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">button<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u2705 <code>.button<\/code> \uc694\uc18c\uac00 <code>.container<\/code> \uc694\uc18c\uc758 \uc624\ub978\ucabd \ud558\ub2e8\uc5d0 \ubc30\uce58\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_%EA%B2%B0%EB%A1%A0\"><\/span>6. \uacb0\ub860<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>position: absolute<\/code>\ub294 <strong>\ubd80\ubaa8 \uc694\uc18c\uac00 <\/strong><code><strong>position: relative<\/strong><\/code><strong> \uc774\uc0c1\uc77c \ub54c \ud574\ub2f9 \ubd80\ubaa8\ub97c \uae30\uc900\uc73c\ub85c \ubc30\uce58\ub429\ub2c8\ub2e4<\/strong>.<\/li>\n\n\n\n<li>\ubd80\ubaa8\uc5d0 <code>position: relative<\/code>\uac00 \uc5c6\uc73c\uba74 <strong>\ubb38\uc11c \uc804\uccb4(<\/strong><code><strong>&lt;html&gt;<\/strong><\/code><strong>)\ub97c \uae30\uc900\uc73c\ub85c \ubc30\uce58<\/strong>\ub429\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\ud2b9\uc815 \uc694\uc18c\ub97c \ubd80\ubaa8 \uae30\uc900\uc73c\ub85c \ubc30\uce58\ud558\ub824\uba74 <strong>\ubd80\ubaa8\uc5d0 <\/strong><code><strong>position: relative<\/strong><\/code><strong>\ub97c \ucd94\uac00<\/strong>\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><code>absolute<\/code> \uc694\uc18c\ub294 \ubb38\uc11c \ud750\ub984\uc5d0\uc11c \uc81c\uac70\ub418\ubbc0\ub85c \ubd80\ubaa8\uc758 \ud06c\uae30\uc5d0 \uc601\ud5a5\uc744 \uc8fc\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n","protected":false},"excerpt":{"rendered":"<p>1. position: absolute\ub780? CSS\uc5d0\uc11c position: absolute\ub97c \uc801\uc6a9\ud558\uba74 \ud574\ub2f9 \uc694\uc18c\ub294 \ubb38\uc11c \ud750\ub984\uc5d0\uc11c \uc81c\uac70\ub418\uba70, \ud2b9\uc815 \uae30\uc900\uc810\uc744 \uae30\uc900\uc73c\ub85c \ubc30\uce58\ub429\ub2c8\ub2e4.\uc774\ub54c \uae30\uc900\uc810\uc774 \ub418\ub294 \uc694\uc18c\ub294 \uac00\uc7a5 \uac00\uae4c\uc6b4 position\uc774 \uc9c0\uc815\ub41c(\uc989, relative, absolute, fixed \uc911 \ud558\ub098\uc778) \ubd80\ubaa8 \uc694\uc18c\uc785\ub2c8\ub2e4. \ub9cc\uc57d \ubd80\ubaa8 \uc694\uc18c\uac00 position: static(\uae30\ubcf8\uac12)\uc774\ub77c\uba74, absolute \uc694\uc18c\ub294 &lt;html&gt; \uc694\uc18c(\uc989, \ubb38\uc11c \uc804\uccb4)\ub97c \uae30\uc900\uc73c\ub85c \ubc30\uce58\ub429\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 .child \uc694\uc18c\ub294 \ubb38\uc11c \uc804\uccb4\ub97c \uae30\uc900\uc73c\ub85c top: 50px, left: 50px \uc704\uce58\uc5d0 &#8230; <a title=\"[HTML &amp; CSS] CSS\uc5d0\uc11c position: absolute\uc640 position: relative\uc758 \uad00\uacc4\" class=\"read-more\" href=\"https:\/\/seuheu.com\/?p=1230\" aria-label=\"[HTML &amp; CSS] CSS\uc5d0\uc11c position: absolute\uc640 position: relative\uc758 \uad00\uacc4\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,25],"tags":[],"class_list":["post-1230","post","type-post","status-publish","format-standard","hentry","category-programming","category-html"],"_links":{"self":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1230"}],"version-history":[{"count":3,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1230\/revisions"}],"predecessor-version":[{"id":1234,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1230\/revisions\/1234"}],"wp:attachment":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}