Question

首先抱歉英语不好。我创建以下代码： HTML：

<!DOCTYPE html>
<html>
<head lang="fa" dir="rtl" style="font-family: tahoma">
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="Stylesheet" type="text/css" href="st.css">
</head>
<body>
    <div id="container">
        <div id="ontop"></div>
        <div id="header"></div>
        <div id="sideRight"></div>
        <div id="center"></div>
        <div id="sideLeft"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

CSS：

#container{
    width:1000px;
    height: 600px;
    background-color: red;
    margin: 0 auto;
}
#ontop{
    width: 200px;
    height: 200px;
    background-color: purple;
    position:absolute;
    top:20px;
    right:20px;
    opacity:0.5;
}
#header{
    width: 94%;
    height: 10%;
    background-color: blue;
    float: right;
    margin-top:3%;
    margin-right: 3%;
}
#sideRight{
    width: 15%;
    height: 60%;
    background-color: yellow;
    float: right;
    margin-top:3%;
    margin-right: 3%;
}
#center{
    width: 58%;
    height: 60%;
    background-color: green;
    float: right;
    margin-top:3%;
    margin-right: 3%;
}
#sideLeft{
    width: 15%;
    height: 60%;
    background-color: yellow;
    float: right;
    margin-top:3%;
    margin-right: 3%;
}
#footer{
    width: 94%;
    height: 10%;
    background-color: blue;
    float: right;
    margin-top:3%;
    margin-right: 3%;
}

我想将div放在＆＃34; ontop＆＃34; id为20px，右边为20px，顶部为＆＃34;容器＆＃34; div 并位于其他div.in我的代码位置＆＃34; ontop＆＃34; div，与屏幕无关＆＃34;容器＆＃34;格。

Answer 1

如果您希望它相对于父元素，您只需将position: relative添加到父元素即可。否则假设相对于下一个相对定位的父元素绝对定位。由于没有，它是相对于窗口。

Example Here

#container {
    width:1000px;
    height: 600px;
    background-color: red;
    margin: 0 auto;
    position: relative; /* Added .. */
}

将div标记放在其他标记之上，并将位置与另一个div相关联

1 个答案: