javascript - 强制或嵌入 7 张绝对定位的图像到特定的 div 中？

所以我正在构建一个网站，用户可以根据提供给 JS 函数的代码加载他们的头像，它是 7 张大小相同但元素不同的图像 - 皮肤基础、头发、眼睛、嘴巴、衬衫、鞋子、裤子。它们在页面加载时加载，并且需要堆叠在一起。

这是 html:

<body onload="LoadCharDiv('codas', 'AvatarImgFrame');">
<div id="MainBody">
    <div id="DataFrame">        
        <div class="DataObjects"><div class="InfoLabels">Account Level:&nbsp;</div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
        <div class="DataObjects"><div class="InfoLabels">Profile Views:&nbsp;</div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
        <div class="DataObjects"><div class="InfoLabels">Messages:&nbsp;</div><div class="InfoData" id="MessageData">0</div></div>
    </div>


    <div id="AccountFrame">
        <div id="AccountAvatar">
            <div id="AvatarImgFrame"><img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" id="Acc_img"/></div>
            <input type="button" id="sendPm" value="Send Message" name="sendPm"/>
        </div>
        <div id="AccountInfo">
            <div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ."&nbsp". $row['last_name'] ."&nbsp;". "(".$row['username'].")");?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div>
            <div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div>
        </div>


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

"LoadCharDiv()"是一个 JS 函数，它只是根据提供的字符代码将图像放入 div，不要认为它有关系，但无论如何它在这里:

function LoadCharDiv(codas, div){
var code = "1c0c1c0c1c2c1";
var data = code.split("c");
var skins2 = [skins[data[0]], eyes[data[1]], hair[data[2]], mouth[data[3]], pants[data[4]], shoes[data[5]], torso[data[6]]];
var inhtml = "";
for(var d = 0; d < skins2.length; d++){
inhtml = inhtml + "<img src='"+skins2[d]+"'/>";
}
document.getElementById(div).innerHTML = inhtml;
}

这是我在页面上的 CSS:

*{
    margin: 0px;
    padding: 0px;
    font-family: 'Ubuntu', sans-serif;  
    }
body{
    background-color: #111111;
    margin: 1%;
}
#MainBody{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    height: 800px;
}
#AccountFrame{
    width: 100%;
    padding: 15px;
    height: 100%;
    background-color: #eeeeee;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
}
#DataFrame{
    font-size: 2.0vh;
    padding: 15px;
    background-color: #eeeeee;
    border-radius-top: 4px;
    width: 100%;
    text-align: right;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
#DataFrame ,.InfoLabels, .InfoData{
    display: inline-block;
}

#AccountAvatar{
    float: left;
    width: 30%;
}
#AccountAvatar img{
    width: 10%;
    position: absolute;
    left: 0;
    right: 0;
}
#sendPm{
    width: 100%;
    height: 5.0vh;
    background-color: #0071ff;
    border: 0px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #1A1A1A;
    font-size: 2.0vh;
}
#sendPm:hover{
    background-color: #308CFF;
}

.DetailLabel{
    display: inline-block;
    width: 9.7vh;
    color: #0071ff;
}
.DetailInput{

    width: 40%;
    display: inline;
}

.DetailObjects{

    width: 100%;
    display: inline-block;
    padding: 1vh;
}
#AccountName{
    color: #0071ff;
}
#AccountInfo{
    width: 68%;
    float: left;
    font-size: 1.7vh;
    padding: 1vh;
    height: 100%;
}
#NameObject{
    font-size: 3vh;
    padding: 0px;
    padding-left: 1vh;
}

enter image description here

正如你在图片中看到的，当前

#AccountAvatar img{
    width: 10%;
    position: absolute;
    left: 0;
    right: 0;
}

字符放置在页面的一侧，我希望它放置在“发送消息”按钮的正上方，并且在页面调整大小时保持在那里而不会在屏幕上 float 。

它应该是这样的: enter image description here

我在想也许有一种方法可以在没有 position: absolute 的情况下将图像叠加在一起？

谢谢。

尝试将父位置设置为相对位置。

#AccountAvatar{
    float: left;
    height: 500px;
    position: relative;
    width: 30%;
}
#AccountAvatar img{
    width: 60%;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-right: auto;
    margin-left: auto;

}

enter image description here

字符出现在按钮下方。有什么办法可以把他调整到按钮上方吗？

最佳答案

您的绝对定位很好，但是，绝对元素不在正常的内容流中，因此您需要向绝对元素的容器添加高度。

http://jsfiddle.net/rwh3emp2/1/

#AvatarImgFrame是图片的容器

#AvatarImgFrame {
    height: 230px;
}

您可以从 #AccountAvatar 中删除高度

关于javascript - 强制或嵌入 7 张绝对定位的图像到特定的 div 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28678219/

javascript - 强制或嵌入 7 张绝对定位的图像到特定的 div 中？

上一篇：Css 更改不会生效

下一篇：html - 表格单元格未在 Chrome 中正确换行文本