将图像定位在另一个html元素之上

Question

我有以下内容：

这是html代码：

<p>
    <label>Select Roles</label>
    <span id="dualselect" class="dualselect">
        <img id="loading1"  src="@Url.Content("~/content/template/images/loaders/loader7.gif")" alt="Img Not Avalible" />
        <select name="RolesSelect" id="dualSelectRoles1" multiple="multiple" size="10">
            <option value="2">Avaliable Roles</option>
        </select>

        <span class="ds_arrow">
            <span class="arrow ds_prev">&laquo;</span>
            <span class="arrow ds_next">&raquo;</span>
        </span>
        <img id="loading2"  src="@Url.Content("~/content/template/images/loaders/loader7.gif")" alt="Img Not Avalible" />
        <select name="select4" multiple="multiple" id="dualSelectRoles2" size="10">
            <option value="1">Users Roles</option>
        </select>
    </span>
</p>
<p class="stdformbutton">
    <button class="submit radius2" type="submit">Save</button>
</p>

如何定位每个图像以使其位于框的中间（和顶部）？

Answer 1

你需要在select＆amp; amp;周围放置一个包装器。装载机图像，像这样：

<强> HTML

<div>
    <select name="select4" multiple="multiple" size="10">   
        <option value="1">Users Roles</option>
    </select>
    <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif" />
</div>

...然后绝对将它放在盒子里面，如下所示：

<强> CSS

img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px; // half the loader width
    margin-top: -8px; // half the loader height
}

div, select {
    position: relative;
    width: 500px;
}

<强> Fiddle

Answer 2

您可以应用position:fixed;样式。

为您的图像分配一个类：

<img id="loading1" class="loading" ... />

现在使用CSS设置样式：

.loading{
    position: fixed;
    top: 100px;
    right: 500px;
}