Исправлено положение внутреннего элемента для внешнего элемента

У меня есть изображение и контрольное изображение в правом нижнем углу этого изображения. Я хочу, когда я изменяю размер окна, проверенное изображение все еще находится в правом нижнем углу внешнего изображения. Использование @media запроса является очень сложнымИсправлено положение внутреннего элемента для внешнего элемента

<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 list-parents-modal"> 
     <div class="parent-list-content-modal col-lg-2 col-md-2 col-sm-3 col-xs-4 alignCenter"> 
      <img ng-show="parent.check" class="img-check-modal" src="http://s22.postimg.org/mckimsgdp/tick_remove_parent.png"> 
      <img class="img-circle img-thumbnail img-thumbnail-modal" src="http://s23.postimg.org/yizg2hfgr/user_thumbnail_1.jpg"> 
     </div> 
    </div> 
</div>

Мой CSS

.list-parents-modal { 
    height: 250px; 
    overflow-y: auto; 
} 
.img-check-modal { 
    position: absolute; 
    width: 20px; 
    margin-left: 105px; 
    margin-top: 115px; 
}

Моя скрипка: Fiddle

источник

2015-05-11 Pham Minh Tan

Вы хотите, чтобы изображение было в таком же положении или что ?? –

Я хочу tick_remove_parent.png в том же положении. :) –

возможно, так?

.list-parents-modal { 
 
    height: 250px; 
 
    overflow-y: auto; 
 
} 
 
.img-check-modal { 
 
    position: absolute; top: 50%; left: 50%; 
 
    width: 20px; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    -ms-transform: translate(-50%,-50%); 
 
     transform: translate(-50%,-50%); 
 
}

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' rel='stylesheet' type='text/css'> 
 

 
<div class="row"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 list-parents-modal"> 
 
     <div class="parent-list-content-modal col-lg-2 col-md-2 col-sm-3 col-xs-4 alignCenter"> 
 
      <img ng-show="parent.check" class="img-check-modal" src="http://s22.postimg.org/mckimsgdp/tick_remove_parent.png"> 
 
      <img class="img-circle img-thumbnail img-thumbnail-modal" src="http://s23.postimg.org/yizg2hfgr/user_thumbnail_1.jpg"> 
 

 
     </div> 
 
    </div> 
 
</div>

источник

2015-05-11 07:35:13 Dmitriy

в вашем сценарии, вы упомянули точек вместо%. Поэтому постарайтесь, используя в .img-check-modal как

left:45%; 
bottom:45%

вместо

margin-left:105px; 
margin-top:115px;

Если мои ответы помогает, нажмите на голосование

источник

2015-05-11 07:20:06

Я пробовал это решение. Но вы знаете, в моей скрипке. Я использовал изображение круга в структуре Bootstrap, он будет реагировать, когда я изменю размер окна. Так что .img-check-modal не в том же положении. Во всяком случае, ваше решение правильно. Спасибо :) –

Попробуйте это положение не будет перемещен.

.img-check-modal {position: absolute; 
    width: 20px; 
    right: 33%; 
    bottom: 25%; 
    margin-left: -6.6px; 
    margin-top: -5px;}

источник

2015-05-11 07:27:19

Это работает очень хорошо. Хотя, мой результат не очень хорош. Но это именно то, что я хочу. Большое спасибо. :) –

Добро пожаловать, чувак ... –

Исправлено положение внутреннего элемента для внешнего элемента

ответ

Смежные вопросы