абсолютное позиционированное изображение в плавающем div

Question

У меня есть верхняя панель, а ссылки задаются с помощью float. В одной из ссылок у меня есть плавающий div.In, что div я хочу показать абсолютное позиционное изображение. Я использую абсолютный потому что я не хочу, чтобы показать полное изображение только часть его будет displayed.this достигается с помощью верхней и левой, как

CSS

div.cont{ 
    max-width:50px; 
    min-width:50px; 
    height:50px; 
    overflow:hidden; 
} 
img{ 
    position:absolute; 
    width:100px; 
    height:100px; 
    top:-10px; 
    left:-15px; 
} 

HTML

<div style="float:right;"> 
    <div class="cont"> 
     <img src="image url"/> 
    </div> 
</div> 

Но поскольку изображение является абсолютным, оно отображается за пределами этого div.

Как можно преодолеть это и показать изображение в div?

Заранее спасибо.

Answer 1

Установите положение на родительском DIV:

div.cont{ 
     max-width:50px; 
     min-width:50px; 
     height:50px; 
     overflow:hidden; 
     position:relative; 
} 

Когда Вы размещаете что-то абсолютно, он позиционируется относительно следующего позиционированного предка. Если вы не укажете позиционирование, то предком будет тело.

Answer 2

Используйте margin-top и margin-left вместо left: и сверху: `на img.

Answer 3

По умолчанию абсолютно позиционированные элементы расположены относительно окна просмотра. Добавьте position: relative в ваш плывущий div. Это будет позиционировать изображение внутри относительно его родителя, а не относительно окна просмотра.