스택 된 자식을 인식하는 CSS 부모

질문

두 개의 이미지가 서로 겹쳐져 있습니다. 내 솔루션이 작동하고 절대 위치를 사용합니다.

이 접근 방식의 단점은 부모 요소가 자식 경계를 인식하지 못하기 때문에 container를 적용하지 않는다는 것입니다.

부모님이 자녀에게 크기를 자동으로 맞추도록하려면 어떻게해야하나요?

• Flex 및 Grid 솔루션이 허용되며 절대 솔루션을 포지셔닝합니다.
• 자바스크립트를 사용하고 싶지 않습니다.
• container 높이를 수동으로 설정해야하는 솔루션을 해킹하고 싶지 않습니다.
• 최신 브라우저 (Chrome, Firefox, Opera, Safari 및 Edge)에서 작동하면 괜찮습니다.

오래 전에 Grid와 관련된 솔루션에 대해 읽은 것 같지만 확실하지 않습니다.

div {
  position: relative;
  background: #eee; /* DOES NOT FILL UP */
}

img {
  position: absolute;
}

img:last-child {
  margin-left: 3rem;
  margin-top: 3rem;
}

<div>
  <img src="http://placekitten.com/200/140">
  <img src="http://placekitten.com/200/139">
</div>

Something below

Expand snippet

답변1

아래와 같이 CSS Grid를 사용합니다. 트릭은 두 이미지를 동일한 행 / 열에 만드는 것입니다.

코드 snippet 표시

.box {
  display:grid;
  background: lightblue; 
  /* remove the below if you want full width */
  width:-moz-fit-content; 
  width:fit-content;
}

img {
  grid-row:1;
  grid-column:1;
}

img:last-child {
  margin-left: 3rem;
  margin-top: 3rem;
}

<div class="box">
  <img src="http://placekitten.com/200/140">
  <img src="http://placekitten.com/200/139">
</div>

Something below

Expand snippet

더 나은 지원으로 position : absolute 를 사용하면 아래와 같습니다.

코드 snippet 표시

.box {
  display: table; /* remove this if you want full width */
  background: lightblue;
  position: relative;
  z-index: 0;
}

img:first-child {
  position: absolute;
  z-index: -1;
}

img:last-child {
  margin-left: 3rem;
  margin-top: 3rem;
  display:block;
}

<div class="box">
  <img src="http://placekitten.com/200/140">
  <img src="http://placekitten.com/200/139">
</div>

Something below

Expand snippet

마이너스 마진이있는 세 번째 솔루션 :

코드 snippet 표시

.box {
  display: table; /* remove this if you want full width */
  background: lightblue;
}

img {
 vertical-align:top;
}

img:last-child {
  margin-top: 3rem;
  margin-left:-9rem;
}

<div class="box">
  <img src="http://placekitten.com/200/140">
  <img src="http://placekitten.com/200/139">
</div>

Something below

Expand snippet

답변2

플렉스 container의 여백을 사용하여이 작업을 수행 할 수 있습니다. 필요에 따라 여백을 조정하면됩니다.

div {
  position: relative;
  background: #eee; /* DOES NOT FILL UP */
display: flex;
    align-items: flex-start;
}


img:last-child {
      margin-top: 3rem;
    margin-left: -7rem
}

<div>
  <img src="http://placekitten.com/200/140">
  <img src="http://placekitten.com/200/139">
</div>

Something below

Expand snippet

 

 

 

 

출처 : https://stackoverflow.com/questions/63113634/css-parent-aware-of-stacked-children