HTML에서 한 이미지를 다른 이미지 위에 어떻게 배치합니까?

저는 레일스 프로그래밍의 초보자로서 한 페이지에 많은 이미지를 보여 주려고 시도하고 있습니다. 어떤 이미지는 다른 이미지 위에 놓여 야합니다. 간단하게하기 위해 파란색 사각형의 오른쪽 상단 모서리에 빨간색 사각형이 있지만 파란색 모서리를 원한다고 가정하십시오. 성능 문제로 인해 합성 (ImageMagick 및 이와 유사한)을 피하려고합니다.

서로 겹치는 이미지를 배치하고 싶습니다.

더 어려운 예로, 더 큰 이미지 안에 배치 된 주행 거리계를 상상해보십시오. 6 자리 숫자의 경우 백만 개의 다른 이미지를 합성하거나 즉석에서 6 개의 이미지를 다른 이미지 위에 배치하기 만하면됩니다.

좋아, 얼마 후, 내가 착륙 한 것이 있습니다.

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

가장 간단한 솔루션입니다. 그건:

페이지 흐름에 배치되는 상대 div를 만듭니다. div가 얼마나 큰지 알 수 있도록 기본 이미지를 상대적으로 먼저 배치하십시오. 첫 번째 이미지의 왼쪽 상단을 기준으로 오버레이를 절대 값으로 배치합니다. 요령은 친척과 절대자를 정확하게 얻는 것입니다.

이것은 하나의 이미지를 다른 이미지 위에 띄우기 위해 내가 한 일을 베어 본 것입니다.

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">

출처

아이디어를 줄 수있는 코드는 다음과 같습니다.

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

나는 의심 ESPO의 솔루션이 절대적으로 두 이미지의 위치를 당신을 필요로하기 때문에 불편할 수 있습니다. 첫 번째 흐름이 흐름에 배치되기를 원할 수 있습니다.

일반적으로 CSS를 사용하는 자연스러운 방법이 있습니다. 컨테이너 요소에 position : relative을 넣은 다음 절대적으로 자식을 그 안에 배치하십시오. 불행히도 한 이미지를 다른 이미지 안에 넣을 수 없습니다. 컨테이너 div가 필요한 이유입니다. 내용에 자동으로 맞추기 위해 플로트로 만들었습니다. 인라인 블록은 이론적으로 잘 작동하지만 브라우저 지원은 열악합니다.

편집 : 내 요점을 더 잘 설명하기 위해 이미지에서 크기 속성을 삭제했습니다. 컨테이너 이미지의 기본 크기를 원하고 미리 크기를 모르는 경우 백그라운드 트릭을 사용할 수 없습니다 . 그렇게하면 더 좋은 방법입니다.

내가 오류를 일으킬 수 있음을 발견 한 한 가지 문제는 리처 터의 답변에서 아래 코드입니다.

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

스타일 내에 px 단위를 포함해야합니다. 예 :

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

그 외에는 대답이 잘 작동했습니다. 감사.

pseudo elements부모 요소를 기준으로 절대 위치를 지정할 수 있습니다 .

이를 통해 모든 요소에 대해 두 개의 추가 레이어를 사용할 수 있습니다. 따라서 하나의 이미지를 다른 이미지 위에 배치하는 것이 쉬워집니다.

마크 업 :

<div class="overlap"></div>

CSS :

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

여기의 라이브 데모

가장 쉬운 방법은 배경 이미지를 사용하고 해당 요소에 <img>를 넣는 것입니다.

다른 방법은 CSS 레이어를 사용하는 것입니다. CSS 레이어를 검색하는 데 도움이되는 많은 리소스가 있습니다 .

명확성을 위해 여기에서만 인라인 스타일. 실제 CSS 스타일 시트를 사용하십시오.

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>

약간 늦을 수 있지만이를 위해 다음을 수행 할 수 있습니다.

HTML

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

SASS

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}

@ buti-oxa : 비판적이지는 않지만 코드가 유효하지 않습니다. HTML width과 height속성은 단위를 허용하지 않습니다. CSS width:와 height:속성을 생각하고있을 것 입니다. 태그 text/css와 함께 컨텐츠 유형 ( ; Espo 코드 참조) 도 제공해야합니다 <style>.

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

및 속성 px;에 그대로 두면 렌더링 엔진이 멈출 수 있습니다.widthheight

페이지 흐름에 배치되는 상대 div를 만듭니다. div가 얼마나 큰지 알 수 있도록 기본 이미지를 상대적으로 먼저 배치하십시오. 첫 번째 이미지의 왼쪽 상단을 기준으로 오버레이를 절대 값으로 배치합니다. 요령은 친척과 절대자를 정확하게 얻는 것입니다.