Div相互重叠- HTML
Div相互重叠- HTML
提问于 2015-05-14 11:59:36
我要把我的社交图标放在屏幕的底部，把我的图像库放在屏幕的中间，但是，社交图标移动到屏幕的中间，图像库似乎在重叠我的社交图标，我不能将它定位在屏幕的底部
每次我向页面添加新内容时，它都会影响到社交图标。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="icon" type="image/png" href="images/ace.png"/>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="example/imageStyle.css" rel="stylesheet" type="text/css" media="all" />
<link href="example/jphotogrid.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>
<link href="jphotogrid.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="example/jphotogrid.js"></script>
<script src="example/jflickrfeed.js"></script>
<script src="example/setup.js"></script>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >☰ Menu</span>
<div class="nav-menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href=#>VIDEOS</a></li>
<li class="current"><a href="Images.html">IMAGES</a></li>
<li><a href=#>EVENTS</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li><a href="Contact.html">ENQUIRIES</a></li>
</ul>
</div>
<div class="main">
<ul id="pg">
<li>
<img src="http://farm4.static.flickr.com/3647/3435384001_9ed9864bb4.jpg" alt="DSC_0660">
<p>DSC_0660</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3311/3436188742_caaa28c689.jpg" alt="DSC_0698">
<p>DSC_0698</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3371/3436188466_418a0d8a06.jpg" alt="DSC_0668">
<p>DSC_0668</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3397/3436188128_5e503cefcd.jpg" alt="DSC_0704">
<p>DSC_0704</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3300/3436187796_4d228a5bde.jpg" alt="DSC_0699">
<p>DSC_0699</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3386/3435382439_68b5e3742b.jpg" alt="DSC_0602">
<p>DSC_0602</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3657/3436187288_e84058f54b.jpg" alt="DSC_0603">
<p>DSC_0603</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3405/3436187010_c731dea9a3.jpg" alt="DSC_0604">
<p>DSC_0604</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3403/3435381659_ea615ecf14.jpg" alt="DSC_0607">
<p>DSC_0607</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3570/3436186474_4e35487600.jpg" alt="DSC_0619">
<p>DSC_0619</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3339/3434101571_30f6f2bffd.jpg" alt="DSC_0620">
<p>DSC_0620</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3134/3434099407_32da82e761.jpg" alt="DSC_0590">
<p>DSC_0590</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3538/3434096369_e2de95b252.jpg" alt="DSC_0562">
<p>DSC_0562</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3348/3434093487_f5a5b8fdb3.jpg" alt="DSC_0544">
<p>DSC_0544</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3652/3434091639_dccdc6342a.jpg" alt="DSC_0541">
<p>DSC_0541</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3537/3434089449_cde6162fa7.jpg" alt="DSC_0532">
<p>DSC_0532</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3385/3434895530_4bf2857b49.jpg" alt="DSC_0531">
<p>DSC_0531</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3411/3434069355_7df0d65490.jpg" alt="Dog dogs">
<p>dogs</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3349/3434870890_3b51171084.jpg" alt="DSC_0693">
<p>DSC_0693</p>
</li>
<li>
<img src="http://farm4.static.flickr.com/3544/3434061033_ba1be12cce.jpg" alt="DSC_0691">
<p>DSC_0691</p>
</li>
</ul>
</div>
<section>
<div id="middle">
</div>
</section>
<div class="sI">
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="images/social/fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="images/social/twitter.png" /></a>
</div>
</div>
</body>
</html>CSS：
<style type="text/css">
body {
background-color: black;
}
.icons {
text-align: center;
position:absolute;
bottom:0px;
left:0;
width: 100%;
border:2px solid red;
}
.main {
width: 700px;
margin: 0 auto;
text-align: left;
}
#middle {
height:100px;
}
</style>JSFIDDLE: https://jsfiddle.net/dzx9v25b/
回答 5
Stack Overflow用户
发布于 2015-05-14 12:10:35
应该试试这个..。
.sI{
position: relative;
}
.icons{
text-align:right;
}Stack Overflow用户
发布于 2015-05-14 12:18:23
只需更改位置:对于CSS中的position:relative (图标类)，绝对更改为.icons
CSS (编辑)
body
{
background-color: black;
margin: 0; /* ADDED */
}
.main {
width: 700px;
height: auto; /* ADDED */
overflow: auto; /* ADDED */
margin: 0 auto;
text-align: left;
}
#pg {
position: relative;
display: block; /* ADDED */
height: auto; /* REPLACED by 585px */
background: #000;
margin-bottom: 50px;
margin-top: 50px;
}Stack Overflow用户
发布于 2015-05-14 12:25:57
删除类中的“位置:绝对；”应该可以解决您的问题。默认情况下，这通常会使position元素保持静态。这个链接很好地讨论了通过CSS定位元素的不同方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30236853
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号