代码之家  ›  专栏  ›  技术社区  ›  Tom Smykowski

如何创建与页面一起滚动的中心div?

  •  1
  • Tom Smykowski  · 技术社区  · 15 年前

    我有一个网站,我想把一个DIV上面这个网站与字段输入电子邮件和按钮“订阅”。它应该像我们都喜欢的广告那样工作。所以这个div应该始终位于屏幕的中心,它应该位于网站的“上方”,并在用户浏览页面时滚动。当用户点击X时,它应该关闭。

    怎么做?

    2 回复  |  直到 15 年前
        1
  •  8
  •   Phrogz    15 年前

    查看CSS position:fixed z-index 财产。要使项目水平和垂直居中,请为其指定固定尺寸,将其定位在50%、50%的位置,然后使用负边距。例如:

    #annoying-floater {
      z-index:10;
      position:fixed;
      top:50%; left:50%;
      width:640px; height:480px;
      margin-left:-320px; margin-top:-240px
    }
    

    要“关闭”它,请设置 display none 通过JS。例如:

    window.onload=function(){
      document.getElementById('annoying-floater-closer').onclick = function(){
        document.getElementById('annoying-floater').style.display='none';
      }
    }
    
        2
  •  2
  •   Sebastian Patane Masuelli    15 年前

    你的意思是当页面滚动时div将保持居中吗?在这种情况下,请使用position:fixed来放置除<IE8之外可以工作的div;,若要使其在那里工作,请使用 this