I am working on CSS design template.
I have two images imageOne and imageTwo.
Both are position: relative because if I set one of them position: absolute then it does not stay as responsive anymore and responsiveness is the key here.
What I want is to place imageTwo on top of imageOne.
How can I achieve that while twitterbootstrap's responsive feature still works on these two images?
Below is my code: (jsfiddle available here)
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
CSS
.image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
I've added a wrapper div for those images, with position relative and changed .image { position: relative to absolute and it worked for me. http://jsfiddle.net/uS7nw/2/
<div class="container">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>
And
.container {
position: relative;
}
.image {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다