창 크기 조정시 이미지 위치 수정

Question

페이지에서 위치가 고정 된 이미지가 있습니다. 브라우저의 크기를 재조정하면 이미지가 내 페이지 콘텐츠로 넘어갑니다. 어떻게 그 일이 일어나지 않도록 할 수 있습니까?

<div > 
    <img id="img1" class="wrapperImage"></img> 
</div> 

<style type="text/css"> 
    .wrapperImage 
    { 
    position : fixed; 
    width:200px; 
    height:100px 
    } 
    </style> 

Answer 1

당신은 중앙 사업부를 설정하고 position:relative 설정 및 설정에해야 당신이 이미지 중앙 사업부와 z-index 당신은 당신이 설정, 표시하려는 요소의 우선 순위를 변경할 수 position:absolute 귀하의 이미지에 z-index:10. 부모 태그 상대 위치를 제공함으로써

Answer 2

css에 z-index:-1;을 추가하십시오.

Answer 3

.wrapperImage { 
     position : fixed; 
     width: 100%; 
     max-width:200px; 
     height:auto 
    } 

크기가 백분율로 나타납니다. responsive design.

JSFIDDLE

Answer 4

당신은이 작업을 수행 할 수

이 이미지는 창 크기를 조정 심지어 같은 위치에 남아있을 것입니다 ,

, 그리고 자식 조금 절대 위치는 경우에도 변경되지 않습니다 윈도우의 크기가 조정됩니다.

<div id="divname"> 
    <img id="img1" class="wrapperImage"></img> 
</div> 

<style type="text/css"> 
    .divname{ 
     position:relative; 
    } 

    .wrapperImage 
    { 
    position : absolute; 
    z-index:-1; //depending weather your image should appear 
         at the above or below div change it to +1 or -1 
    top: 100px; 
    right: 100px; 
    width:200px; 
    height:100px 
    } 
    </style>