Question

我在此图像外部的右下方有一张图像和一张检查图像。我想，当我调整窗口大小时，选中的图像仍然位于外部图像的右下角。使用@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

Answer 1

在您的方案中，您提到了px而不是％。因此，请尝试在.img-check-modal中使用

left:45%;
bottom:45%

而不是

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

Answer 2

试试这个位置不会被移动。

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

Answer 3

也许是这样？

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

固定外部元素的内部元素的位置

3 个答案: