Div重叠互相 - HTML

时间：2015-05-14 11:59:36

标签： javascript html css

我将我的社交图标放在屏幕的底部，并将我的图像库放在屏幕中间，然而，社交图标移动到屏幕中间，图像库似乎与我的社交图标重叠我不能将它定位在屏幕的底部

每次我向页面添加新内容时，都会影响社交图标

代码：

<!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" >&#9776; 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 个答案:

答案 0 :(得分：0)

只需将CSS中的.icons（图标类）的位置：绝对更改为位置：相对

JSFiddle : Working Demo

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;
 }

答案 1 :(得分：0)

删除“position：absolute;”在课堂上.icons应该解决你的问题。这通常会使您的位置元素默认为静态。这个link很好地讨论了通过CSS定位元素的不同方法。

答案 2 :(得分：0)

将图标保留在页面底部

从height: 585px;移除#pg并将其overflow:auto;

对于具有浮动元素的容器，您需要overflow:auto;，以便在float从常规流中删除元素时保持伸展以适应内容的能力。

还会让你的#pg容器高度欺骗文档的其余部分，使其认为它会更快结束，从而导致重叠。

Here is a working fiddle

＆＃13;
＆＃13; 
 body {
   background-color: black;
 }
 .icons {
   text-align: center;
   bottom: 0px;
   position: relative;
   left: 0;
   width: 100%;
 }
 .main {
   width: 700px;
   margin: 0 auto;
   text-align: left;
 }
 #pg {
   position: relative;
   overflow: auto;
   background: #000;
   margin-bottom: 50px;
   margin-top: 50px;
 }
 #pg li {
   position: relative;
   list-style: none;
   width: 175px;
   height: 300px;
   overflow: hidden;
   float: left;
   z-index: 2;
   opacity: .6;
 }
 #pg li.active {
   opacity: 1;
   border-color: white;
 }
 #pg li.selected {
   opacity: 1;
   z-index: 99;
   -moz-box-shadow: 0px 0px 10px #fff;
   -webkit-box-shadow: 0px 0px 10px #fff;
 }
 #pg li img {
   display: block;
   width: 100%;
 }
 #pg li p {
   color: white;
   margin: 10px 0;
   font-size: 12px;
 }
＆＃13; 
<!DOCTYPE html>
<title>Images</title>
<!--[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>

<body>
  <div class="header"></div> <span class="menu-Trigger" align="center">&#9776; 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>
＆＃13;
＆＃13;
＆＃13;

如果你想在任何时候看到它们，那么vv

将图标保留在视口的底部

我已更新了您的Fiddle here。

您的图标需要position:fixed;保留在底部视图端口，您还需要更高的z-index才能将它们保持在图像上方。

希望它有所帮助！

＆＃13;
＆＃13; 
 body {
   background-color: black;
 }
 .icons {
   text-align: center;
   bottom: 0px;
   position: fixed;
   left: 0;
   width: 100%;
   z-index: 9999999
 }
 .main {
   width: 700px;
   margin: 0 auto;
   text-align: left;
 }
 #pg {
   position: relative;
   height: 585px;
   background: #000;
   margin-bottom: 50px;
   margin-top: 50px;
 }
 #pg li {
   position: relative;
   list-style: none;
   width: 175px;
   height: 300px;
   overflow: hidden;
   float: left;
   z-index: 2;
   opacity: .6;
 }
 #pg li.active {
   opacity: 1;
   border-color: white;
 }
 #pg li.selected {
   opacity: 1;
   z-index: 99;
   -moz-box-shadow: 0px 0px 10px #fff;
   -webkit-box-shadow: 0px 0px 10px #fff;
 }
 #pg li img {
   display: block;
   width: 100%;
 }
 #pg li p {
   color: white;
   margin: 10px 0;
   font-size: 12px;
 }
＆＃13; 
<!DOCTYPE html>
<title>Images</title>
<!--[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>

<body>
  <div class="header"></div> <span class="menu-Trigger" align="center">&#9776; 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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-1)

试试这个可能对你有所帮助

 .icons {
                    text-align: center;
                    position:absolute;
                    bottom:0px;
                    left:0;
                    width: 100%;
                    border:2px solid red;
                }

答案 4 :(得分：-1)

应该试试这个.. 

.sI{
 position: relative;
}
.icons{
text-align:right;
}
相关问题
最新问题