gpt4 book ai didi

html - 如何阻止 2 个 div 重叠?

转载 作者:行者123 更新时间:2023-11-28 17:42:22 25 4
gpt4 key购买 nike

我希望较小的 div 位于较大的红色 div 的正下方,但我无法弄清楚。我认为显示 block css 会将较小的 div 放在较大的 div 下方,但这似乎不起作用。

我无法发布图片。这是一个链接 http://s1.postimg.org/pzgvqi8y7/Capture1.jpg

这是html

<!DOCTYPE html>
<html>
<head>
<title>Select Ye Favorite</title>
<link rel='stylesheet' type='text/css' href='css/list.css'/>
<link rel="stylesheet" type="text/css" href="jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" />
<!--jquery and jquery UI scripts here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<!--js pdf stuff -->
<!-- <script type="text/javascript" src="jspdf.js"></script> -->
<script type="text/javascript" src="dist/jspdf.debug.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jjspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<!-- photo selection scripts-->
<script type="text/javascript" src="jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>
<!--my scripts-->
<script type='text/javascript' src='js/list.js'></script>
</head>
<body>
<div id='header'><h1 id='titleSite'>List Life</h1></div>
<div id='list'></div>
</body>
</html>

这是CSS

![html, body
{
height: 100%;
}
/*
* {
border: 2px solid black;
}*/
#header{
/* z-index:1;
border-radius:5px;
background-color:#ECF7C6;
height:60px;
position:fixed;
margin-top:-20px;*/
z-index: 0;
position: fixed;
width: 98.75%;
margin-top: -2%;
margin-bottom:0.5%;
margin-left:0.25%;
margin-right:0.25%;
height: 100px;

border: 2px dashed black;
background-color:#FC3F4D;
border-radius:5px;
}
div{height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
margin:auto;
display:block;
position:relative;

}
div #titleSite{
position:relative;
top:10%;
color:white;
text-align:center;
font-family:Arial,sans-serif;
font-weight:bold;
border: 2px dashed white;
}][2]

最佳答案

试试这个:

#titleSite{
position:relative;
top:10%;
color:white;
text-align:center;
font-family:Arial,sans-serif;
font-weight:bold;
border: 2px dashed white;
}
#list{ position: relate; top:90px;}

关于html - 如何阻止 2 个 div 重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23864044/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com