Question

我在向页面布局添加div时遇到问题，我认为我需要z-index，但无法让它工作。

当我添加：

<div id="blue-container">
<img id="image" src="http://dummyimage.com/315x630/293fe6/fff"/>
<div id="blue-text">
    <p>Blue text example<br>
      Blue text example<br>
      Blue text example </p>
  </p>

页面未按预期显示。我正在尝试使用蓝色文本显示在其上方的蓝色容器显示在body-main的右侧。我认为它需要分层 - z-index？

谢谢。

编辑：我添加了一个示例图片，说明我希望它看起来如何 - http://imgur.com/3Ap44t1

Answer 1

尝试我的代码..我认为这就是你要找的东西。

<style>
* {
    margin : 0px;
    padding : 0px;
}
#wrapper {
    width: 1440px;
    top : 150pt;
    margin: 0 auto;
}
#header {
    content: url(http://placehold.it/960x120);
    display: block;
    width: 960px;
    margin: 0 auto;
}
#buttons {
    display: block;
    width: 960px;
    margin: 0 auto;
    padding-top : 15px;
    padding-bottom : 12px;
}
#body-left {
    float: left;
    content: url(http://placehold.it/240x930);
}
#body-right {
    float: left;
    content: url(http://placehold.it/240x930);
}
#body {
    float: left;
    width: 960px;
}
#body-main {
    width: 960px;
    height: 630px;
    background-color: white;
    float:left;
}
span#hometop {
    content: url(http://placehold.it/960x300);
    left : 180.00pt;
    top : 123.75pt;
    width : 720.00pt;
    height : 225.00pt;
}
#blue-container {
    height: 400px;
    width: 315px;
    background:url("http://dummyimage.com/315x630/293fe6/fff");
    float:right;
}
#blue-bg {
    position: relative;
    left: 0;
    top: 0;
}
#blue-text {
    position: relative;
    left: 50px;
    top: 50px;
    height: 600px;
    width: 215px;
    color:#fff;
}
div#body-logo {
    padding-top: 85px;
    padding-bottom: 35px;
    padding-left: 25px;
    content: url(http://placehold.it/450x122);
}
div#body-textfull {
    padding-left: 25px;
    left : 198.75pt;
    top : 545.25pt;
    width : 216.75pt;
    height : 256.50pt;
}
#footer {
    content: url(http://placehold.it/960x250);
    padding-top: 25px;
    padding-bottom: 25px;
    margin: 0 auto;
    clear: both;
}
.text-container{width:450px;
    float:left;}
</style>
<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="buttons">Buttons go here</div>
  <div id="body-left"></div>
  <div id="body"> <span id="hometop"></span>
    <div id="body-main"> 

       <div  class ="text-container">
           <div id="body-logo"></div>     
           <div id="body-textfull">
            <p>body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text body text</p>
          </div>
      </div>           
    <div id="blue-container">
        <div id="blue-text">
            <p>Blue text example<br>
              Blue text example<br>
              Blue text example </p>

            </div>

     </div>
    <!-- End body-main --> 
  </div>
  <!-- End body -->

</div>
 <div id="body-right"></div>
  <div id="footer"></div>
</body>
</html>

Answer 2

结帐，这符合您的要求

   <html>
<head>

<style> p {
position:relative;
left:0;
}
#blue-container img{
position:absolute;
}
</style>
<body>
<div id="blue-container">
<img  id="image" src="http://dummyimage.com/315x630/293fe6/fff"/>
<div id="blue-text">
    <p>Blue text example<br>
      Blue text example<br>
      Blue text example </p>
</body>
</html>

Answer 3

在这种特殊情况下你根本不需要z-index

http://jsfiddle.net/xmaudv9c/2/

<div id="blue-container">
    <div id="blue-text">
        <p>Blue text example<br>
          Blue text example<br>
          Blue text example </p>
      </p>
</div>

我删除了以下标记

<img id="image" src="http://dummyimage.com/315x630/293fe6/fff"/>

CSS - 我已删除所有z-index

#blue-container {
    height: 400px;
    width: 315px;
    background:url("http://dummyimage.com/315x630/293fe6/fff");
}


#blue-text {
    position: relative;
    left: 50px;
    top: 50px;
    height: 600px;
    width: 215px;
    color:#fff;//added color here
}

将z索引div添加到页面的问题

3 个答案:

http://jsfiddle.net/xmaudv9c/2/