어떻게 위치에 하나 이미지의 상단에 다른 HTML?

StackOverflow https://stackoverflow.com/questions/48474

문제

나는 초보자에는 레일을 프로그래밍,를 표시하려고 많은 이미지에 페이지입니다.일부 이미지는 누워의 상단에 다른 사람입니다.을 간단하게 말하고 싶어 블루 광장,붉은 광장에서 오른쪽 상단의 파란 광장(그러나 단단 코너에서).난을 피하려고 합성(와 ImageMagick 및 이와 유사한)때문에 성능 문제를 해결합니다.

내가 원하는 위치를 겹치기 이미지는 상대적인 중 하나다.

로 더 어렵를 들어,상상계 내에 더 큰 이미지입니다.한 자리를 필요가 있을 종합만 다른 이미지,또는 그것의 모든 즉석에서 모든 필요한 것은 여섯 가지 다른 상단에 하나입니다.

도움이 되었습니까?

해결책

Ok,몇 시간 후,여기에 내가에 착륙했:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 70px;
}
<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

으로는 간단한 솔루션입니다.는:

Create 상대 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

심사 서울 영등포구의 솔루션 될 수 있습 불편을 필요로하기 때문에 당신의 위치를 모두 이미지를 절대적이다.할 수 있는 첫 번째 중 하나의 위치를 자체적 흐름을 타고 있습니다.

일반적으로있는 자연적인 방법으로 할 수 있는 CSS.을 넣어 위치:상대 컨테이너에서 요소,그리고 절대적으로 위치로 아이들이 있습니다.불행하게도,당신은 할 수 없습니다 하나 이미지 내부에 다른입니다.그 이유는 내가 필요한 컨테이너 div.통는 뜨게 맞게를 내용입니다.그것을 만드는 디스플레이:인라인 블록해야 하는 이론적으로 작동뿐만 아니지만,브라우저가 지원이 빈약한다.

편집:나는 삭제된 크기에서 특성을 설명하기 위해 이미지를 내점 더 낫습니다.당신이 원하는 경우 컨테이너에 이미지를 그것의 기본 크기와 모르겠 크기 미리 사용할 수 없습니다 배경 트.당신이 경우에,그것은 더 나은 방법입니다.

하나의 문제는 것으로 나타났 오류를 발생시킬 수 있는 rrichter 의 응답,아래 코드:

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

을 포함해야 한 픽셀 단위에타냅니다.

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

다른 것보다는 대답했다.감사합니다.

당신이 절대적으로 위치 pseudo elements 상대하여 그들의 부모 요소입니다.

이것은 당신이 두 레이어 재생 모든 요소에 대해 그 위치는 하나 이미지의 상단에는 다른 쉽게 됩-로 최소한의 의미 태그(빈 div etc.).

태그:

<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 stylesheet.

<!-- 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>

@부티 oxa:지 현학적지만,당신의 코드가 잘못되었습니다.HTML width 고 height 속성을 허용하지 않 단위;당신이 생각하의 CSS width: 고 height: 속성입니다.당신은 또한 제공 콘텐츠 형식(text/css;볼 서울 영등포구의 코드)과 <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; 에 width 고 height 속성을 일으킬 수 있는 렌더링 엔진 balk.

그것이 될 수 있는 조금 늦었지만 이를 위해 할 수 있습니다:

enter image description here

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;
    }
  }
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top