CSS에서 절대 위치 지정이란 무엇입니까?

CSS에서 절대 위치 지정은 요소의 위치를 ​​문서 흐름과 독립적으로 만드는 위치 지정 방법입니다. 절대 위치 지정으로 설정된 요소 상자는 문서 흐름에서 완전히 제거되고 포함 블록을 기준으로 배치됩니다. 기본적으로 절대 위치 지정 위치는 브라우저를 기준으로 위쪽, 오른쪽, 아래쪽 및 왼쪽에 배치됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서 절대 위치 지정은 요소의 위치를 ​​문서 흐름과 독립적으로 만드는 위치 지정 방법입니다.

절대 위치 지정으로 설정된 요소 상자는 문서 흐름에서 완전히 제거되고 포함 블록(문서의 다른 요소 또는 초기 포함 블록일 수 있음)을 기준으로 배치됩니다. 기본적으로 절대 위치 지정 위치는 브라우저를 기준으로 하며 위쪽, 오른쪽, 아래쪽, 왼쪽으로 배치됩니다.

일반적인 문서 흐름에서 요소가 이전에 차지했던 공간은 해당 요소가 존재하지 않은 것처럼 닫힙니다. 요소는 원래 일반 흐름에서 생성된 상자 유형에 관계없이 위치 지정 후 블록 수준 상자를 생성합니다.

절대 위치 지정(absolute)에 대해 자세히 알아볼까요? 실제로 절대 위치 지정 절대와 부동 부동은 부분적으로 유사합니다. 부동 부동을 이해할 수 있다면 절대 위치 지정 절대를 이해하는 데 큰 도움이 될 것입니다.

먼저 절대값과 부동소수점 사이의 유사점에 대해 이야기해 보겠습니다. wrapping 및 highly deceptive

wrapping

사진은 천 마디 말보다 낫다고 합니다(유일한 차이점은 사진의 p입니다. 아래는 절대값을 추가했습니다)

<p   style="max-width:90%">
  <img  src="/static/imghw/default1.png"  data-src="img/25/1.jpg"  class="lazy"   / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>
<p style="border:4px solid red; position: absolute;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"   / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>

요소에 절대값이나 부동소수점을 추가하면 요소에 display:block;을 추가하는 것과 같습니다. 그것은 무엇을 의미합니까? 예를 들어 인라인 요소 범위의 기본 너비는 가변적이므로 너비를 추가하면 작동하지 않습니다. 너비를 설정하려면 범위를 display:block으로 설정해야 합니다. 하지만 스팬에 절대값이나 부동소수점을 추가하면 스팬의 표시 속성이 자동으로 블록이 되어 너비를 지정할 수 있습니다. 따라서 CSS에서 절대/부동 및 표시:블록이 동시에 나타나는 경우 표시:블록은 중복된 CSS 코드입니다.

하이디셉션

위의 예에서는 사진의 바깥쪽 레이어의 p에 절대값이 추가되어 높은 디셉션이 잘 반영되지 않고 내부 사진으로 절대값이 이동되어 효과가 나타납니다. out:

<p   style="max-width:90%">
  <img  src="/static/imghw/default1.png"  data-src="img/25/1.jpg"  class="lazy"   / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>
<p style="border:4px solid red;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>

CSS float에 대한 자세한 설명을 읽어보셨다면 효과가 동일하다는 것을 아실 것입니다. 그러나 그 뒤에 숨은 원칙은 실제로 다르며 완전히 동일하지는 않습니다. 텍스트를 추가하면 볼 수 있습니다:

<p   style="max-width:90%">
  <img  src="/static/imghw/default1.png"  data-src="img/25/1.jpg"  class="lazy"   / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>
<p style="border:4px solid red;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
  我是一个绝对定位的absolute元素
</p>

그림을 보면 텍스트가 그림에 가려져 있다는 것이 분명합니다. 이는 float와는 다릅니다. float는 높이가 축소되었다고 생각하도록 부모 요소를 속이지만, float 요소 자체는 여전히 문서 흐름에 있고, 텍스트는 float 요소를 둘러싸고 가려지지 않습니다.

그러나 절대값은 더 이상 상위 요소를 속이는 것으로 간주할 수 없으며 레벨 관계를 갖습니다. 일반 문서 흐름의 상위 요소가 필멸의 요소로 간주되면 절대 요소는 오늘날의 관점에서 더 이상 동일한 차원에 있지 않습니다. 상위 요소 관점에서는 절대값으로 설정된 이미지가 완전히 사라져 텍스트가 가장 왼쪽부터 표시됩니다. 절대레벨이 높아서 글이 그림으로 가려집니다.

아직 전투력 5의 쓰레기였던 CSS를 처음 접했을 때, 절대에도 계층 개념이 있을 수 있다는 것을 알았으니 이제 완전히 이해했다고 착각했던 기억이 납니다. 생각해 보면 정말 혼란스럽습니다. (물론 나쁜 것은 아닙니다. 과거의 자신이 두부 조각 같았다고 느낄 때마다 그것은 발전했다는 의미입니다. 반면에 항상 생각한다면 그 당시의 당신은 여전히 ​​​​영예에 안주하고 있다는 것을 의미합니다.)

위의 기초를 다 갖춘 후에는 다음과 같은 절대의 특징도 이해해야 합니다.

• 기준점을 결정하는 방법
• 및 상대 사랑과 죽음
• z-index와의 관계
• 다시 그리는 비용을 줄이고 reflow

앵커 포인트를 결정하는 방법

절대값이 계층화되면 가장 먼저 발생하는 질문은 브라우저가 요소를 표시할 위치입니다. 일반 문서 흐름의 요소에 대해 브라우저는 상위, 하위 및 형제 요소의 크기와 위치를 기반으로 요소의 위치를 ​​계산할 수 있습니다. 그런데 레이어링 후에는 어떻게 해야 할까요? 기본 아이디어는 다음과 같습니다.

첫 번째 경우: 사용자가 요소에 대해 절대값만 지정하고 왼쪽/상단/오른쪽/하단을 지정하지 않습니다. 이때, 절대 요소의 왼쪽 상단 기준점 위치는 일반적인 문서 흐름에서의 요소 위치입니다. 위 그림에서와 같이 그림 팬더는 상위 요소의 첫 번째 하위이므로 왼쪽 위 모서리 앵커 포인트는 상위 요소 콘텐츠의 왼쪽 위 모서리입니다.

그림 팬더와 아래 텍스트의 순서를 변경하여 부모 요소의 두 번째 자식으로 만들면 그림은 천 단어의 가치가 있습니다.

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>

结论重复一遍：未指定left/top/right/bottom的absolute元素，其在所处层级中的定位点就是正常文档流中该元素的定位点。

第二种情况：用户给absolute元素指定了left/right，top/bottom

先简单点，让absolute元素没有position:static以外的父元素。此时absolute所处的层是铺满全屏的，即铺满body。会根据用户指定位置的在body上进行定位。

只指定left时，元素的左上角定位点的left值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>

只指定right时，元素的右上角定位点的right值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>

只指定top时，元素的左上角定位点的top值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>

只指定bottom时，元素的左下角定位点的bottom值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
</p>

通过对left/top/right/bottom的组合设置，由于没有position:static以外的父元素，此时absolute元素可以去任意它想去的地方，天空才是它的极限。

和relative相爱相杀

通常我们对relative的认识是（好吧，我承认，这是我战5渣渣时的认识。如果你是弗利萨，可以鄙视这句话）：relative主要用于限制absolute

上面已经说了，如果absolute元素没有position:static以外的父元素，那将相对body定位，天空才是它的极限。而一旦父元素被设为relative，那absolute子元素将相对于其父元素定位，就好像一只脚上被绑了绳子的鸟。

比如你要实现下图iOS里APP右上角的红色圈圈

通常的做法是将APP图片所处的p设成relative，然后红色圈圈设成absolute，再设top/right即可。这样无论用户怎么改变APP图片的位置，红色圈圈永远固定在右上角，例如：

.tipIcon {
  background-color: #f00;
  color: #fff;
  border-radius:50%;
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  right:-10px;  //负值为自身体积的一半
  top:-10px;
}

<p style="display: inline-block;position:relative;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"   / alt="CSS에서 절대 위치 지정이란 무엇입니까?" >
  <span class="tipIcon">6</span>
</p>

这样做效果是OK的，兼容性也OK。但CSS的世界里要实现一个效果可以有很多种方式，具体选用哪个方案是见仁见智的。我比较看重的标准：一个是简洁，另一个是尽量让每个属性干其本职工作。

用这两个标准看待上述实现方法，应该是有改进的空间的。首先外层p多了relative未能简洁到极致。其次relative的本职工作是让元素在相对其正常文档流位置进行偏移，但父层p并不需要任何位置偏移，之所以设成relative唯一的目的是限制absolute子元素的定位点。因此在我看来这并没有让relative干其本职工作。好比小姐的本职工作是服务业，顺便陪客户聊聊天，但纯聊天聊完一个钟，恐怕会被投诉。

（学习视频分享：css视频教程）

위 내용은 CSS에서 절대 위치 지정이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!