어떻게 위치에 하나 이미지의 상단에 다른 HTML?
-
09-06-2019 - |
문제
나는 초보자에는 레일을 프로그래밍,를 표시하려고 많은 이미지에 페이지입니다.일부 이미지는 누워의 상단에 다른 사람입니다.을 간단하게 말하고 싶어 블루 광장,붉은 광장에서 오른쪽 상단의 파란 광장(그러나 단단 코너에서).난을 피하려고 합성(와 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>
심사 서울 영등포구의 솔루션 될 수 있습 불편을 필요로하기 때문에 당신의 위치를 모두 이미지를 절대적이다.할 수 있는 첫 번째 중 하나의 위치를 자체적 흐름을 타고 있습니다.
일반적으로있는 자연적인 방법으로 할 수 있는 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.
그것이 될 수 있는 조금 늦었지만 이를 위해 할 수 있습니다:
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;
}
}
}