Question

我现在正在网站上工作但是我有一些问题，将图像放在2个div之上，而另一个问题是底部div是页脚，我想保持坚持到底部（这个部分工作，但div上面的图像不是）

这是一张图片，可以更好地向您展示我的想法： enter image description here

如果您需要查看我的代码问我，我想知道如何实现这一点的一些想法。

对于已在我的帖子中发表评论的人，首先感谢你的时间，但遗憾的是它没有工作（到目前为止，我一直在尝试你的建议）但为了帮助你更多地了解我尝试做什么，我给你一些我的代码。

<html>
<head>
<style type="text/css">
/* general */
 body { background: #fdfdfd; font:  12px Verdana, Geneva, sans-serif;  color:#444;      margin: 0 0 300px; /* bottom = footer height */}
 html { position: relative; min-height: 100%;}
 .fix_width { width: 940px; margin: 0 auto; }
 .fix_width:after, .left_foot_cont ul li:after { content: "  " ; display:block; height:0; clear:both; visibility:hidden; }

  #header { background:#6FF; height:100px; z-index: 3; position: relative;  border-top: color: #555555 thick; border-width:5px; }
  #container { position:relative; top:0px;  margin-top:100px;     overflow: auto;}
  .cont {width:250px; padding-left:20px;  margin-left:10px; display:inline-block; float:left;  }

  #footer {  background: #A9CF38;       position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;}

    img {width:940px; }


 </style>



</head>
<body>

<div id="header">
        <div class="fix_width">
<h2>
Just the header nothing important
</h2>
        </div>
</div>

     <div id = "container">
                    <div class="fix_width">
                                    <div class="cont">
                                               <h2>
                                                            Lorem ipsum
                                                </h2>
                                                <p class="last">
                                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
                                                </p> <!-- End p.last -->
                                    </div><!-- End .cont -->
                     </div> <!-- End .fix_width -->
          </div><!-- End .container -->

          <!-- Where should i put the image  ????? --->
          <img src="http://www.mormonshare.com/sites/default/files/handouts/cg_banner-blank.gif"> </img>


               <div id = "footer">
                    <div class="fix_width">


                                        <div class="footer_con_left">
                                                              <h2>
                                                                     Lorem ipsum
                                                                     <br /><br />
                                                            </h2>
                                                             <h1>
                                                                    dolor sit amet
                                                                    <br /> 
                                                                    dolor sit amet
                                                                    <br  />
                                                                    dolor sit amet
                                                                    <br />
                                                                    dolor sit amet      
                                                        </h1>
                                        </div>  <!-- End. footer_con_left -->
                        </div><!--  Einde class fix_width -->
      </div> <!-- Einde class footer -->

</body>

</html>

正如你可以在代码中看到的那样，我希望这个图像在白色空间中放置50％，在绿色空间放置50％（所以在容器div和页脚div之间的代码中，或者可能最好在这些div之上说出来）

感谢您的帮助！

Answer 1

您应该在DIV1中放置图片，将position:relative设置为DIV1，将position:absolute设置为IMAGE并将bottom:-50%设置为IMAGE或bottom:0px;margin-bottom:-50%;

Answer 2

我认为您应该查看我在此link

上创建的代码

上述链接中的代码会将您的图片置于您的div之间

忽略这一个。

<html>
<head>
    <style type="text/css">
    #container{
        width:100%;
        height:100%;
        position:absolute;
        background:black;
        margin:0px;
        padding:0px;

    }
    #test1{
        width:100%;
        height:35%;
        position:relative;
        background:blue;
        margin:0px;
        padding:0px;

    }
    #test2{
        width:100%;
        height:25%;
        position:relative;
        background:white;
        margin:0px;
        padding:0px;

    }
    #test3{
        width:100%;
        height:40%;
        position:absolute;
        background:red;
        margin:0px;
        padding:0px;

    }
    .content{
        width:200px;
        height:200px;
        background:white;
        float:left;
        margin:10px 0px 10px 50px;
        left:200px;
        position:relative;
    }

    </style>



</head>
<body>
<div id="container">

    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>



    </div>

</div>

</body>

</html>

Answer 3

在div中包裹图片：

targethoweveryouwish {
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-300px;
z-index:10;
}

好的，以上代码中有什么内容。 50％的属性是将div移动到页面的中心，但它将div的左上角移动到中心，因此您需要减去div的高度和宽度的一半以使其正确居中，对margin-top和margin-left属性进行调整。 z-index基本上类似于向页面添加图层的2D方式。默认情况下，一切都在第0层，所以如果你想重叠一些东西，只需将它们放在更高或更低的z-index上。您也可以使用负值。

网站 - 溢出2个div之间的图像

3 个答案: