Question

我认为这是一个我忽略的问题，但我可以使用一些帮助。

在下面的代码中（其中一部分是我的）我尝试将“twitter”div放在“wrapper”div之上。我尝试了不同的东西，比如z-index，但没有任何成功。有人可以帮我把这两个div放在一起吗？ - 谢谢

代码：

<head>
<title>Proto Format, grafisch ontwerp &amp; concept.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="Proto2.css" rel="stylesheet" type="text/css">

<style type="text/css">
#twitter {
height:auto;
width:auto;
z-index:100;
margin-left:500px;
margin-top:100px;
}

#wrapper{

margin-left: auto;
margin-right:auto;
z-index:auto;
}

#content{
margin-left:auto;
margin-right:auto;
height:800px;
}


</style>

</head>


<body bgcolor="#BA830E" link="#006C8C" vlink="#006C8C" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="content">

<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#ffffff',
      color: '#666666'
    },
    tweets: {
      background: '#',
      color: '#666666',
      links: '#006C8C'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('chantalheeg').start();
</script>
</div>

<div id="wrapper">
<!-- ImageReady Slices (visie.psd) -->
<table width="989" height="1012" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabel_01">

    <tr>
        <td height="132" colspan="5" background="afbeeldingen/klein-2kolom_01.gif">&nbsp;</td>
        <td width="198" height="811" rowspan="5" background="afbeeldingen/klein-2kolom_02.gif">&nbsp;</td>
        <td>
            <img src="afbeeldingen/spacer.gif" width="1" height="132" alt=""></td>
    </tr>

    <tr>
        <td width="235" height="366" rowspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="235" height="366">
          <param name="movie" value="afbeeldingen/menu-links/menulinks-visie.swf">
          <param name="quality" value="high">
          <embed src="afbeeldingen/menu-links/menulinks-visie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="235" height="366"></embed>
        </object></td>
        <td height="117" colspan="4" background="afbeeldingen/klein-2kolom_04.gif">&nbsp;</td>
        <td>
            <img src="afbeeldingen/spacer.gif" width="1" height="117" alt=""></td>
    </tr>
    <tr>
        <td height="69" colspan="4" background="afbeeldingen/klein-2kolom_05.gif">&nbsp;</td>
        <td>
            <img src="afbeeldingen/spacer.gif" width="1" height="69" alt=""></td>
    </tr>
    <tr>

        <td width="12" height="493" rowspan="2" background="afbeeldingen/klein-2kolom_06.gif">&nbsp;</td>
        <td width="260" height="493" rowspan="2" align="left" valign="top" background="afbeeldingen/essentie6.gif">

        <span class="titeltekst"><br><br>Visie  Proto Format</span><span class="tekst"><br>
            <br>
        </span>
          <span class="tekst">Proto Format maakt in opdracht reclame en promotiemiddelen voor verschillende
          bedrijven en instanties. We zijn altijd op zoek naar de juiste manier om een bedrijf of product te promoten en ontwikkelen een werkwijze om hieraan vorm te geven. We houden niet van standaardwerk en spannen ons er dan ook altijd voor in
          om, veelal samen met de klant, tot iets te komen dat net even dat stukje extra geeft.
          <br>
          <br>
      </span>


      </td>
        <td width="13" height="493" rowspan="2" background="afbeeldingen/essentie7.gif">&nbsp;
            </td>
        <td width="270" height="493" rowspan="2" align="left" valign="top" background="afbeeldingen/essentie8.gif">     <span class="tekst"><br><br><br>
          <br>Wij vinden het niet belangrijk om ons eigen stempel ergens op te drukken. Het gaat erom dat de klant iets krijgt waar hij trots op is en wat natuurlijk aansluit bij de betreffende doelgroep.
          <br>In onze uitingen zorgen we er voor dat de boodschap zo helder mogelijk naar buiten wordt gebracht.<br>
      We houden niet van onnodige opschmuk. De essentie moet communiceren.<br><br></span></td>


        <td>
            <img src="afbeeldingen/spacer.gif" width="1" height="180" alt=""></td>



    </tr>



    <tr>
        <td width="235" height="514" rowspan="2" background="afbeeldingen/klein-2kolom_10.gif">&nbsp;</td>
        <td>
            <img src="afbeeldingen/spacer.gif" width="1" height="313" alt=""></td>

    </tr>
    <tr>

        <td height="201" colspan="5" background="afbeeldingen/klein-2kolom_11.gif">&nbsp;</td>
        <td>
            <img src="afbeeldingen/spacer.gif" width="1" height="201" alt=""></td>
            <span class="twitter">

    </tr>



</table>
</div></div>
<!-- End ImageReady Slices -->


</body>
</html>

Answer 1

对于#wrapper set

position: relative
z-index: 100

对于#twitter set

position: absolute
z-index: 110

您还必须在包装器中设置Left和Top以设置其位置。在您的HTML（或呈现的HTML）

中

<div id='wrapper'>
    <div id='twitter'>
    </div>
</div>

希望有所帮助。

戴夫

Answer 2

用这些

替换你的css

#twitter {
 height:auto;
 width:auto;
 z-index:100;
 margin-left:500px;
 margin-top:100px;
 border:solid 2px red;
}

#wrapper{
 margin-left: auto;
 margin-right:auto;
 border:solid 2px green;
}

边框颜色仅供您参考......这肯定会有用......

Answer 3

尝试将position:absolute;添加到#twitter div。

Answer 4

尝试添加位置属性。 z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

IE也有一些与z-index有关的错误，请参阅：http://www.gobdg.com/blog/2009/04/positionrelative-z-index-ie-bug/

希望这会有所帮助：D

为你提供一些CSS

<style type="text/css">
#twitter {
z-index:1;
position:absolute;
left:500px;
top:100px;
}

#wrapper{
margin: auto;
}

#content{
margin:auto;
height:800px;
}
</style>

Div不能相互叠加

4 个答案: