如何改变盒子的位置？答案

【问题标题】：how to change the position of boxes?如何改变盒子的位置？
【发布时间】：2014-10-30 09:37:51
【问题描述】：

这是我的代码，我想在 css 和 html 中创建 box in box

但是当我成功时，我无法移动盒子，我需要从顶部留出一个边距才能将盒子放在盒子的中心或将它们移动到主盒子，我该怎么做？

代码：

<html >
    <head>
        <style>
            ui {
                background-color:red;
                padding:100px 100px;
            }

            div1{
                background-color:white;
                padding:50px 50px;
            }

            div2{
                background-color:yellow;
                padding:50px 50px;
            }
        </style>
    </head>

    <body>
        <ui>
            <div1>hello</div1>
            <div2>bye</div2>
        </ui>
    </body>

</html>

【问题讨论】：

@Vucko 不用担心它在 HTML5 中有效，但主要问题是，代码实际上应该做什么！
w3schools.com/css/css_boxmodel.asp
@Vucko：JSF/Facelets，见jsftoolbox.com/documentation/facelets/10-TagReference/…
@Vucko 这只是一个名字！

标签： html css

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>

生产者：http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex

【讨论】：