CSS - 앵커 이동 표시: 플렉스 및 위치: 절대

Question

Flex 요소와 세 개의 하위 요소가 있습니다. 두 번째 자식은 다음과 같이 절대 위치 지정을 사용하여 첫 번째 자식과 겹쳐야 합니다.

예상:

두 번째 아이는 첫 번째 아이 옆이 아닌 위 에 있어야 합니다.

그러나 부모에 display: flex를 설정하면 절대 요소의 앵커 포인트나 참조 포인트가 div의 시작 부분으로 이동하는 것처럼 보입니다. 실제 결과는 다음과 같습니다.

실제 결과:

두 번째 하위 요소를 첫 번째 또는 세 번째 요소 안에 넣는 것은 overflow:scroll이 있으므로 옵션이 아닙니다. 내 레이아웃은 overflow:scroll。在父级上使用任何其他 display 属性也是如此，因为我的布局依赖于 display: flex에 의존하기 때문에 부모의 다른 display 속성을 ​​사용하는 경우에도 마찬가지입니다. 이러한 해결 방법이 다른 게시물에서 제안된 것으로 알고 있지만 이러한 제한 사항을 해결하는 질문/답변을 찾지 못했습니다.

두 번째 아이에게 display:absolute 이외의 다른 것을 사용하는 것도 음의 여백처럼 작동하지만 작동하게 할 수는 없습니다.

이것이 가능한지 아시는 분이나 제안 사항이 있으신 분은 크게 감사하겠습니다.

실제 동작을 확인하기 위해 문제를 보여주기 위해 단순화된 코드는 다음과 같습니다.

으아아아 으아아아

Answer 1

상위 항목에 position:relative;를 추가

요소에 position:absolute; 属性时，它将通过 relative、absolute 或 fixed 定位来针对最近的父元素进行定位。如果没有找到，它将针对 body 进行定位。在这种情况下，您可能需要将 position:relative; 添加到 .wrapper 속성이 부여되면 상대, 절대 또는 고정 위치 지정을 통해 가장 가까운 상위 요소에 대해 위치가 지정됩니다. 찾을 수 없으면 body를 대상으로 합니다. 이 경우 절대 위치 지정을 위한 참조 지점이므로 .wrapper 요소에

를 추가할 수 있습니다.

요소에 위치 값 추가

position:absolute;정의에 따르면 요소는 특정 값 집합을 사용하여 절대 위치

에 배치됩니다. 즉, 상단, 오른쪽, 하단 또는/또는 왼쪽 가장자리로부터 얼마나 떨어져 있는지를 나타냅니다. 어떤 값도 제공하지 않으면 왼쪽 상단에 고정됩니다. 여기서 일어나는 일입니다.

포지셔닝 값을 설정해야 합니다

position:absolute; 从正常内容流中获取一个元素。也就是说，它周围的元素不会影响它的大小或位置；因此绝对位置。为了实现图中所示的效果，您需要指定 .c 元素的宽度，并使用相同的精确值从右边缘定位 .b

일반적인 콘텐츠 흐름에서 요소를 가져옵니다. 즉, 주변 요소는 크기나 위치에 영향을 주지 않으므로

절대

위치입니다. 이미지에 표시된 효과를 얻으려면 .c 요소의 너비를 지정하고 동일한 값을 사용하여 오른쪽 가장자리에서 .b 요소를 배치해야 합니다.

아래 코드 조각을 참조하세요.

🎜 🎜 으아악 으아악 🎜

Answer 2

문서의 flow에서 빼냈기 때문에 div 왼쪽에 나타납니다. 실제로 이는 상위 래퍼가 아닌 뷰포트를 기준으로 배치됩니다. 래퍼를 대상으로 지정하려면 position:relative를 래퍼 클래스로 설정하여 새 포함 블록

을 만듭니다.

div 'a'의 끝과 겹치는지 확인하기 위해 'right' 속성을 사용하여 내가 설정한 Custom Property 값만큼 오른쪽 가장자리를 왼쪽으로 이동했습니다. 이 값은 해당 속성과 div 'c에 설정했습니다. '. 아래 주석이 달린 예를 참조하세요.

으아악 으아악