CSS의 위치에 대한 자세한 설명(코드 예)-CSS 튜토리얼-php.cn

CSS의 위치에 대한 자세한 설명(코드 예)

不言

풀어 주다： 2018-11-02 17:37:41

원래의

3040명이 탐색했습니다.

이 글의 내용은 CSS에서의 위치에 대한 자세한 설명(코드 예제)을 공유하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 위치 속성은 다양하고 강력합니다. 요소의 위치를 설정하거나 변경할 수 있습니다. 가능한 값은 4가지입니다: 정적(기본값), 상대, 절대, 고정. (추천 과정: css 비디오 튜토리얼)

일반적으로 왼쪽, 오른쪽, 위쪽, 아래쪽의 4가지 좌표 속성과 함께 사용됩니다.

static

이것은 기본 위치 값입니다. 정적 요소는 자연스러운 흐름만 따릅니다. 왼쪽, 오른쪽, 위쪽 또는 아래쪽 값의 영향을 받지 않습니다.

relative

위치가 상대로 설정되면 요소는 현재 위치를 기준으로 이동할 수 있습니다.

<p>汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。</p>
<p>云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。金屋妆成娇侍夜，玉楼宴罢醉和春。</p>
<p>姊妹弟兄皆列土，可怜光彩生门户。遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。缓歌慢舞凝丝竹，尽日君王看不足。渔阳鼙鼓动地来，惊破霓裳羽衣曲。</p>

로그인 후 복사

p{ border: 1px solid blue;}

로그인 후 복사

모양은 다음과 같습니다.

CSS의 위치에 대한 자세한 설명(코드 예)

계속 살펴보겠습니다.

<p>九重城阙烟尘生，千乘万骑西南行。翠华摇摇行复止，西出都门百余里。六军不发无奈何，宛转蛾眉马前死。花钿委地无人收，翠翘金雀玉搔头。君王掩面救不得，回看血泪相和流。黄埃散漫风萧索，云栈萦纡登剑阁。</p>
<p class="second">峨嵋山下少人行，旌旗无光日色薄。蜀江水碧蜀山青，圣主朝朝暮暮情。行宫见月伤心色，夜雨闻铃肠断声。天旋地转回龙驭，到此踌躇不能去。马嵬坡下泥土中，不见玉颜空死处。</p>
<p>君臣相顾尽沾衣，东望都门信马归。归来池苑皆依旧，太液芙蓉未央柳。芙蓉如面柳如眉，对此如何不泪垂。春风桃李花开日，秋雨梧桐叶落时。</p>

로그인 후 복사

p{ border: 1px solid blue;}
.second{ position: relative;border:1px solid red; left: 20px; top: 10px;}

로그인 후 복사

모양은 다음과 같습니다.

CSS의 위치에 대한 자세한 설명(코드 예)

빨간색 테두리는 자연스러운 위치를 기준으로 왼쪽에서 20픽셀, 위쪽에서 10픽셀 이동합니다. 거기에 있어야 할 것은 정확한 위치입니다.

파란 문단은 전혀 움직이지 않았습니다. 상대 위치 지정을 사용하면 레이아웃을 깨지 않고 빨간색 단락을 자유롭게 이동할 수 있습니다. 유일하게 부적절한 점은 자신을 제외한 다른 모든 요소가 해당 요소가 이동했다는 사실을 모른다는 것입니다.

absolute

위치가 절대값으로 설정되면 요소는 첫 번째 위치에 있는 요소를 기준으로 이동할 수 있습니다.

"포지셔닝? 포지셔닝 요소란 무엇인가요?"

포지셔닝 요소는 값이 상대적, 절대적 또는 고정된 위치입니다. 따라서 위치가 설정되지 않거나 정적이지 않으면 요소가 배치됩니다.

위치 지정 요소의 특징은 하위 요소에 대한 참조 지점 역할을 할 수 있다는 것입니다.

간단한 계층 구조를 상상해 봅시다:

<section>
  I&#39;m in position relative.
  <p>
    I&#39;m in position absolute!
  </p>
</section>

로그인 후 복사

section {
  background: gold;
  height: 200px;
  padding: 10px;
  position: relative; /* This turns the <section> into a point of reference for the <p> */
}
p {
  background: limegreen;
  color: white;
  padding: 10px;
  position: absolute; /* This makes the <p> freely movable */
  bottom: 10px; /* 10px from the bottom */
  left: 20px; /* 20px from the left */
}

로그인 후 복사

효과는 다음과 같습니다:

CSS의 위치에 대한 자세한 설명(코드 예)