0

我目前正在开发一个供私人使用的博客，并且已经达到了核心博客可以正常工作的地步，避免了一个使它看起来不整洁的美学问题。

主页有两个主要部分： 带有标题和菜单子元素的固定标题。一个 PHP 生成的表格，显示来自 sql 数据库的帖子。

问题是，当向下滚动页面时，标题是为了与表格重叠并保持在顶部以保持整洁，尽管我无法让它这样做。

这是当时写的内容，你能告诉我你的想法和我的问题的可能解决方案吗？

PHP 在表格中显示 sql 结果：

    <div id="cwrapper" style="margin:0px auto; margin-top:125px; margin-bottom:25px; width:600px; height:auto; border-top:1px solid #1E1E1E; border-bottom:1px solid #1E1E1E; z-index:-1;">
<?php
    $con = mysqli_connect("localhost","root","","db_posts");
    // Check connection
    if (mysqli_connect_errno()){
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $result = mysqli_query($con,"SELECT * FROM tb_posts ORDER BY id DESC LIMIT 3");



    echo "<table cellpadding='0' cellspacing='0' border='0' id='posttable' style='z-index:-1;'>"; 
    while($row = mysqli_fetch_array($result)){
        echo "<tr><td class='postcell' style='z-index-1;'>" . $row['post'] . "</td></tr>";
    }         
    echo "</table>";

    mysqli_close($con);
?>
</div>

固定页眉：

    <div id="header">
    <div id="styletext">
        <h1 id="headtext">
            TheNotsoGentleman
            <a href="newpost.php" style="text-decoration:none; color:#000; margin-left:-15px;">.</a>
        </h1>
    </div>
    <div id="menu" style="position:fixed; top:25px; right:20px;">
        <ul>
            <li class="menuitem"><a href="index.php" class="menutext">Blog</a></li>
            <li class="menuitem"><a href="info.php" class="menutext">Info</a></li>
            <li class="menuitem"><a href="downloads.php" class="menutext">Downloads</a></li>
        </ul>
    </div>
</div>

造型：

#header{
    position:fixed;
    left:0px;
    top:0px;
    height:75px;
    width:100%;
    background-image:url(../assets/pictures/trinet_background.png);
    background-repeat:repeat;
    border-bottom:1px outset #666;
    box-shadow: 0px 7px 8px #888888;
}
#styletext{
    position:fixed;
    top:5px;
    left:10px;
    width:auto;
    height:auto;
    min-height:30px;
}
#headtext{
    font-family:official;
    font-size:42px;
    font-style:bold;
    font-weight:normal;
    text-align:center;
}
#posttable{
  width:600px;
  height:auto;
  margin-top:10px;
  margin-bottom:10px;
  z-index:-1;
}
.postcell{
  width:600px;
  height:auto;
  padding-bottom:20px;
  padding-top:20px;
  padding-left:5px;
  padding-right5px;
  border-bottom:1px dashed #333;
  opacity:0.5;
  -webkit-transition:linear 0.2s;
  -moz-transition:linear 0.2s;
  -o-transition:linear 0.2s;
  transition:linear 0.2s;
  z-index:-1;
}
.postcell:hover{
  opacity:1;
  z-index:-1;
}
#newpost{
  position:fixed;
  top:100px;
  left:100px;
  height:500px;
  width:500px;
  background-color:#FFF;
  border:1px solid #000;
  visibility:visible;
  z-index:-1;
}
.menuitem{
  text-decoration:none;
  list-style:none;
  color:#000;
  display:inline-block;
  margin-right:20px;
}
.menutext{
  text-decoration:none;
  color:#999;
  font-size:24px;
  font-family:monospace;
  -webkit-transition:linear 0.6s;
  -moz-transition:linear 0.6s;
  -o-transition:linear 0.6s;
  transition:linear 0.6s;
}
.menutext:hover{
  color:#000;
}

提前感谢您的任何帮助/建议。

4

1 回答 1

0

向元素添加 >1z-index以将#header其弹出到表格上方。所以你的标题 CSS 变为：

#header{
    position:fixed;
    left:0px;
    top:0px;
    height:75px;
    width:100%;
    background-image:url(../assets/pictures/trinet_background.png);
    background-repeat:repeat;
    border-bottom:1px outset #666;
    box-shadow: 0px 7px 8px #888888;
    z-index: 5;
}

z-index您的负片#posttable将不起作用，因为它是静态定位的。z-index仅适用于“定位”元素（带有position: relative、absolute或的元素fixed）。或者，您可以添加position: relative到#posttable元素以使负 z-index 产生影响，但由于标头已经定位，因此更容易将其添加到那里并从#posttable.

于 2013-09-09T21:55:28.980 回答