Question

这是我的标题和我的CSS，为什么当我将位置更改为固定时它会消失，我想要修复因为我想在顶部制作一个粘性标题 **

<div id="header">
        <div class="wrapper">
            <div id="logo">
                <img src="images/logo.jpg" width="115px" height="114x;"/>
            </div>
            <div id="nav">
                <ul id="ulstyle">
                    <li><a  href="index.php">HOME</a></li>
                    <li><a href="news.php">NEWS</a></li>
                    <li><a href="gallery.php">GALLERY</a></li>
                    <li><a href="contact.php">CONTACT</a></li>
                    <div class="dropdown">
                        <li class="dropbtn"><a href="">ABOUT</a></li>
                        <div class="dropdown-content">
                            <a href="aboutteam.php">Team</a>
                            <a href="aboutproject.php">Project</a>
                        </div>
                    </div>
                </ul>
            </div>
            <img id="searchBtn" src="images/find.png">
            <div id="searchbar">
                <img id="closeBtn" src="images/close.png">
                <input type="text" placeholder="Search..." id="searchinput">
            </div>
        </div>
    </div>


body{
    min-width:100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    position: absolute;
    background-color: #dcedf9;
    font-family: 'Ubuntu','PT Sans', 'Roboto', 'Open Sans', sans-serif; 
}
/* header */
#header{
    position: relative;
    min-width: 100%;
    min-height: 129px;
    background-color: #002147;
    padding-top: 1.5625em;
    padding-bottom: 1em;
}

测试：这是我的标题和我的CSS，为什么当我将位置更改为固定时它会消失，我想要修复因为我想在顶部制作一个粘性标题

Answer 1

如果您使用position: fixed，则需要为粘性标题设置元素top: 0，z-index: 9999和left: 0。

Answer 2

可能会在下面帮助你，你可以建立这个：

body{
    min-width:100%;
    min-height: 900px;
    margin: 0;
    padding: 0;
    overflow: auto;
    position: absolute;
    background-color: #dcedf9;
    font-family: 'Ubuntu','PT Sans', 'Roboto', 'Open Sans', sans-serif; 
}
/* header */
#header{
    position: fixed;
    min-width: 100%;
    height: 70px;
    background-color: #002147;
    overflow: hidden;
  box-shadow: 0px 0px 5px 5px #313131;
}
.wrapper{
  display: flex;;
}
#ulstyle{
   display: flex;
  flex-direction: column wrap;
}
#ulstyle>li{
  margin-left: 5px;
}
.body-content{
  height: 900px;
  background-color: yellow;
}
.body-content-red{
  height: 900px;
  background-color: red;
}

<div id="header">
        <div class="wrapper">
            <div id="logo">
                <img src="images/logo.jpg" width="115px" height="70px;"/>
            </div>
            <div id="nav">
                <ul id="ulstyle">
                    <li><a  href="index.php">HOME</a></li>
                    <li><a href="news.php">NEWS</a></li>
                    <li><a href="gallery.php">GALLERY</a></li>
                    <li><a href="contact.php">CONTACT</a></li>
                    <div class="dropdown">
                        <li class="dropbtn"><a href="">ABOUT</a></li>
                        <div class="dropdown-content">
                            <a href="aboutteam.php">Team</a>
                            <a href="aboutproject.php">Project</a>
                        </div>
                    </div>
                </ul>
            </div>
            <img id="searchBtn" src="images/find.png">
            <div id="searchbar">
                <img id="closeBtn" src="images/close.png">
                <input type="text" placeholder="Search..." id="searchinput">
            </div>
        </div>
    </div>
    
    <div class="body-content">
    Some content
    </div>
     <div class="body-content-red">
    Some conten
    </div>

如何修复固定位置并创建粘性标题

2 个答案: