在我的一个div中包含position:absolute
之后,我注意到(div)正在被另一个div重叠。
这是我的小提琴,
我所说的div是#nav-holder
被我的页脚或小提琴的黑色部分重叠。
我也在我的CSS中使用了媒体查询。
#nav-holder {
position: absolute;
top: 0;
right: 0;
width: 200px;
}
答案 0 :(得分:1)
请更新css
*{box-sizing: border-box}
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd,
img, form, fieldset, blockquote {
margin:0 auto;
padding:0;
}
header, footer, div{
position: relative;
display: block;
}
body {
background: #222222;
font: 63% "Century Gothic", Tahoma, Helvetica;
}
#content {
overflow: hidden;
background: #eeeeee;
}
#post-wrapper{
margin: 20px 40px 20px 40px;
position: relative;
}
#posts {
background: #fff;
margin-bottom: 10px;
padding: 10px;
overflow: hidden;
}
#nav #list-group a#active {
background-color: #00aadc;
border-left-color: #00678b;
color: #FFF;
}
#nav{
margin: 0;
overflow: hidden;
}
#nav #list-group {
padding: 0;
}
#list-group{
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
#nav #list-group a {
padding: 15px 10px;
display: block;
color: #333;
border-left: solid 5px #FFF;
text-decoration: none;
font-size: 1.5em;
}
#nav #list-group a:hover {
background-color: #e1e1e1;
border-left-color: #e1e1e1;
}
#posts h2 {
font-size: 2.5em;
word-wrap: break-word;
}
#posts h3, #posts h4, h5, h6 {
padding: 4px 5px;
}
#posts h2, h3, h4, h5, h6 {
color: #3c3f40;
}
h2#titlename{
color: #327800;
}
#posts h3 {
font-size: 1.8em;
}
#posts p {
line-height: 1.3em;
font-size: 1.4em;
}
#posts small {
font-size: 1.2em;
padding: 0px 5px;
}
#posts a {
font-size: 1em;
color: #327800;
font-weight: bold;
text-decoration: none;
}
#posts blockquote {
margin: 10px 20px;
border-left: 3px solid #cccccc;
padding-left: 10px;
}
hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
/* MEDIA QUERIES */
@media screen and (min-width: 900px ) {
#posts{
margin-right: 220px;
}
#nav-holder {
position: absolute;
top: 0;
right: 0;
width: 200px;
}
#post-wrapper{min-height:200px;}
}
<div id="content" class="container">
<div id="post-wrapper" >
<div id="posts">
<h2>test</h2>
<small>Posted at 2015-02-28 18:35:04 by <a href="#">jarn</a></small>
<blockquote><p><h2>test</h2></p></blockquote>
<p id="linked"><a href="news-admin.php?postid=1">Read More</a></p>
</div>
<div id="nav-holder">
<ul id="nav">
<li id="list-group"><a href="client-information.php">Member Information</a></li>
<li id="list-group"><a href="#" id="active">Home</a></li>
<li id="list-group"><a href="client-loan-status.php">Loan Status</a></li>
<li id="list-group"><a href="client-loan-history.php">Loan History</a></li>
</ul>
</div>
</div><!--end of mainposts-->
</div><!-- end content -->
或者您可以选择another way
答案 1 :(得分:0)
我希望这可以帮助你Try this demo
我只是从某些标签中移除了0自动保证金
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd,
img, form, fieldset, blockquote {
margin:0 auto;
padding:0;
}
答案 2 :(得分:0)
试试这个
*{box-sizing: border-box}
body,h1,h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd,
img, form, fieldset, blockquote {
padding:0;
}
div{
margin:0;
}
header, footer, div{
position: relative;
display: block;
}
body {
margin:0;
background: #222222;
font: 63% "Century Gothic", Tahoma, Helvetica;
}
#content {
overflow: hidden;
background: #eeeeee;
}
#post-wrapper{
margin: 20px 40px 20px 40px;
position: relative;
}
#posts {
background: #fff;
margin-bottom: 10px;
padding: 10px;
overflow: hidden;
}
#nav #list-group a#active {
background-color: #00aadc;
border-left-color: #00678b;
color: #FFF;
}
#nav{
margin: 0;
overflow: hidden;
}
#nav #list-group {
padding: 0;
}
#list-group{
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
#nav #list-group a {
padding: 15px 10px;
display: block;
color: #333;
border-left: solid 5px #FFF;
text-decoration: none;
font-size: 1.5em;
}
#nav #list-group a:hover {
background-color: #e1e1e1;
border-left-color: #e1e1e1;
}
#posts h2 {
font-size: 2.5em;
word-wrap: break-word;
}
#posts h3, #posts h4, h5, h6 {
padding: 4px 5px;
}
#posts h2, h3, h4, h5, h6 {
color: #3c3f40;
}
h2#titlename{
color: #327800;
}
#posts h3 {
font-size: 1.8em;
}
#posts p {
line-height: 1.3em;
font-size: 1.4em;
}
#posts small {
font-size: 1.2em;
padding: 0px 5px;
}
#posts a {
font-size: 1em;
color: #327800;
font-weight: bold;
text-decoration: none;
}
#posts blockquote {
margin: 10px 20px;
border-left: 3px solid #cccccc;
padding-left: 10px;
}
hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
/* MEDIA QUERIES */
@media screen and (min-width: 900px ) {
#posts{
margin-right: 220px;
}
#nav-holder {
position: absolute;
top: 0;
right: 0;
margin:16px;
}
}
<div id="content" class="container">
<div id="post-wrapper" >
<div id="posts">
<h2>test</h2>
<small>Posted at 2015-02-28 18:35:04 by <a href="#">jarn</a></small>
<blockquote><p><h2>test</h2></p></blockquote>
<p id="linked"><a href="news-admin.php?postid=1">Read More</a></p>
</div>
<div id="nav-holder">
<ul id="nav">
<li id="list-group"><a href="client-information.php">Member Information</a></li>
<li id="list-group"><a href="#" id="active">Home</a></li>
<li id="list-group"><a href="client-loan-status.php">Loan Status</a></li>
<li id="list-group"><a href="client-loan-history.php">Loan History</a></li>
</ul>
</div>
</div><!--end of mainposts-->
</div><!-- end content -->
我分裂了
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd,
img, form, fieldset, blockquote {
margin:0 auto;
padding:0;
}
进入
body,h1,h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd,
img, form, fieldset, blockquote {
padding:0;
}
div{
margin:0;
}