Question

我有关于最大宽度和绝对定位的问题。

在我网站的顶部，我有一个带有背景图像的'100％-width section'。

我想要一张部分覆盖顶部图像底部的小图片。为此，我在部分（顶部图像）上使用Position：relative，在小图像上使用position：absolute。到目前为止一直很好..

我的问题是，我希望小图像居中并具有最大宽度，因此它与网站上的内容对齐。（其最大宽度为500px ..）

我真的无法弄明白，怎么做......

那么，是否有一种方法只能垂直影响，当使用position：absolute时，或者我可以做的其他事情？

我希望它有意义.. :)

屏幕： http://cvdmark.com/images_help/screens.jpg

<body>

<section id="img_heading">
 <img src="#">
</section>

<section id="content">
 <ul>
  <li>
  </li>
 </ul>
</section>

</body>


body {
width:100%;
min-width:100%;
background-color:#000;
float:left;
}

#img_heading{
width:100%;
min-width:100%;
height:150px;
margin-bottom:6em;
background:url(../img/heading_img_test.jpg);
background-position: center center;
float:left;
position:relative;
}

#img_heading > img{
width:90%;
height:100px;
position:absolute;
bottom:-75px;
margin: 0 auto 0 auto;
max-width:500px;
/*left:5%;*/
background-color:#F69;  
}


#content{
width:90%;
margin: 0 auto 0 auto;
max-width:500px;
}   

#content ul{
width:100%;
list-style-type: none;
}

#content ul li{
width:100%;
float:left;
margin-bottom:30px;
}

JS小提琴：http://jsfiddle.net/rpatil/ukKgx/

Answer 1

我认为您想要的是将绝对位置div与该部分的底部对齐并使其居中..（以下假设您的内容也在该部分居中......）如果您将im替换为img我想给你所需的ID。我给了“foo-id”

div#foo-id
{
  position: absolute;
  bottom: 0px; /*since you want it at the bottom of section*/
  z-index: 2;
  width:90%; /*since your asked for 90%*/
  max-width: 500px;
  /*the following to center your image*/
  margin-left:-45%;
  left:50%;
}

相信有帮助！

这是一个更新的jsfiddle ..谢谢@rubyist .. http://jsfiddle.net/ukKgx/2/

Answer 2

这是使其居中的另一种解决方案 - ＆gt; jsFiddle

<section style="position: absolute; left: 50%;width:50%">
        <div style="position: relative; left: -50%;background-color:#ccc; border: dotted red 1px;width: 90%;max-width:500px;height:150px">
        </div>
    </section>

如果你想让它更加自定义，你必须使用Javascript onLoad页面来计算屏幕宽度％图片宽度

绝对位置 - 中心 - 最大宽度

2 个答案: