个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 09:31:12 26 4
gpt4 key购买 nike

首先抱歉英语不好。我创建以下代码: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%;
}

我想将带有“ontop”id 的 div 放置在距 “container”div 右侧 20px 和顶部 20px 的位置，并且 在 其他 div.in 我的“ontop”div 的代码位置，与屏幕相关而不是“container”div。

最佳答案

如果你想让它相对于父元素，你所要做的就是在父元素上添加position: relative。否则假定相对于下一个相对定位的父元素是绝对定位的。由于没有，所以它是相对于窗口的。

Example Here 

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

关于html - 将一个 div 标签放在其他标签之上，并将位置与另一个 div 相关联，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25702013/

26 4 0
文章推荐： swift - 来自字典数组中特定键的数组？
文章推荐： javascript - 背景图像下方的白色区域
文章推荐： javascript - .show() 时不需要的跳转
文章推荐： javascript - 从子域引用 css 和 js 文件