img 추가 img html

아래 그림과 같이 두 개의 img 태그가 있지만 "portfolioImage1"클래스의 img 태그는 항상 "portfolioItem1"클래스가있는 img 태그 아래에 나타납니다. portfolioImage1이 portfolioItem1보다 위에 있도록 다른 방법으로 구현하려면 어떻게해야합니까?img 추가 img html

고맙습니다.

<div class="portfolioContainer"> 
    <img class="portfolioImage1" src="img/image1.png" /> 
    <img class="portfolioItem1" src="img/portfolioItem.png" /> 
</div>

CSS

.portfolioContainer { 
    height: 400px; 
    width: 490px; 
    left: 400px; 
    top: 275px; 
    position: absolute; 
} 
.portfolioItem1 { 
    left: 20px; 
    z-index: 1; 
    position: absolute; 
} 
.portfolioImage1 { 
    z-index: 2; 
}

출처

2011-09-26 max_

귀하의 CSS는 무엇입니까? –

* 아래 *라고 말하면, 아래 또는 뒤를 의미합니까? –

나는 아래로 뒤에 의미한다, 나는 나의 CSS를 배치했다. –

편집 :

당신은 Z- 인덱스가 작동하기 위해 portfolioImage1에 절대 또는 고정 된 위치를 추가 할 필요가

. OLD

: 아래 의미하는 경우

<div class="portfolioContainer" style="position: relative;"> 
    <img class="portfolioImage1" src="img/image1.png" style="position: relative; z-index: 2" /> 
    <img class="portfolioItem1" src="img/portfolioItem.png" style="position: relative; z-index: 1" /> 
</div>

, 당신은 절대 또는 상대 위치를 사용할 수 있지만, 우리는 크기와 원하는 결과를 필요는 Z- 인덱스를 사용해보십시오 이미지 뒤에 의미하는 경우

. 예를 들어, image1.png의 가격이 20px 고 portfolioItem.png의 가격이 25px 인 경우

<div class="portfolioContainer"> 
    <img class="portfolioImage1" src="img/image1.png" style="position: relative; top: 25px;" /> 
    <img class="portfolioItem1" src="img/portfolioItem.png" style="position: relative; top -20px" /> 
</div>

출처

2011-09-26 20:15:29 fanfavorite

방금 CSS를 추가했습니다.보세요. –

고마워, 잘됐다! –

img 추가 img html

답변

관련 문제