视差图像

视差图像

关注
发信
关注(28)粉丝(399)

html - 菜单不会放在视差图像之上

我正在尝试在视差图像的顶部添加菜单，但是当我添加float时：留在CSS中的ul l {}上会使菜单进入视差图像，而不是位于视差图像的顶部。需要帮助以使菜单位于视差图像上方并已修复，以便在向下滚动时菜单保持在视差图像上方。

这是网站的HTML：

<html>

<head>
<title>Croydon Cycles</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="style.css" rel= "stylesheet" type="text/css">
<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="parallax.min.js"></script>
</head>

<body>


<div class="title">
     <img src="images/Logo.png" alt="Croydon Cycles" align="center">

</div>

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="shop.html">Shop</a></li>
    <li><a href="#">Location</a></li>

</ul>




<div class="container">



    <div class="parallax" data-parallax="scroll" data-z-index="1">
        <div class="b1">
            <a href="shop.html">

                <input type="button" class="button" value="view all bikes" >
            </a>
        </div>




    </div>
    <p>The Croydon Cycles was founded in 2001 in order to promote and encourage
            all areas of cyclesports. The club has a rich history of racing both on the
            road and track. We also have an active social side and regular training trips away.
            Croydon Cycles is located in mostly around Thornton heath pond,
            however we still are active around all of Croydon.</p>


</div>


<div class="profiles">

        <p id="Header-1">Here are some of the members of Croydon Cycles:</p>

    <div class="pic-1">
        <img src="images/profile-1.jpg" alt="Proffesional biker"  height="280px" width="420px">
        <p>The Croydon Cycles was founded in 2001 in order to promote and encourage
                all areas of cyclesports. The club has a rich history of racing both on the
                road and track. We also have an active social side and regular training trips away.
                Croydon Cycles is located in mostly around Thornton heath pond,
                however we still are active around all of Croydon.</p>
    </div>



    <div class="pic-2">
    <img src="images/profile-2.jpg" alt="Proffesional biker"  height="280px" width="420px">
    <p>The Croydon Cycles was founded in 2001 in order to promote and encourage
            all areas of cyclesports. The club has a rich history of racing both on the
            road and track. We also have an active social side and regular traini.</p>
    </div>
</div>

</body>

</html>


这是CSS代码：

    * {
    margin: 0;
    padding: 0;
    }


    p {
    font-family: 'Karla', sans-serif;
    margin: 2.5%;
    padding:0;
    }

   .title {
    text-align: center;
    }

   .container {

    margin: 0 auto;
    background: #f9f9f9;
    font-size: 24px;
    object-fit: cover;

}

.parallax {
    background: url('images/background-1.jpeg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 400px;
    min-height: 400px;


}

.b1{
    text-align: center;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position: absolute;
    top: 65%;
    left: 45%;
}

.pic-1{
    height:280px;
    width:420px;
    float: left;
    padding-left: 100px;
}


.pic-2{
    height:280px;
    width:420px;
    float: right;
    padding-right: 100px;

}

#Header-1 {
    font-family: 'Lobster', cursive;
    font-size: 35px;
}

ul {

}

ul li{
    list-style: none;
    display: inline-block;
    float:left;

}

ul li a{
    text-decoration: none;
}

最佳答案

尝试使用headerBlock类为标题和ul添加div父级，并添加以下内容：

.headerBlock {
  background-color: white;
  position: fixed;
  width: 100%;
}


像这个例子



* {
    margin: 0;
    padding: 0;
    }


p {
    font-family: 'Karla', sans-serif;
    margin: 2.5%;
    padding:0;
    }

.title {
    text-align: center;
    }

.container {
    margin: 0 auto;
    background: #f9f9f9;
    font-size: 24px;
    object-fit: cover;

}

.parallax {
    background: url('http://via.placeholder.com/500x500') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 400px;
    min-height: 400px;


}

.b1{
    text-align: center;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position: absolute;
    top: 65%;
    left: 45%;
}

.pic-1{
    height:280px;
    width:420px;
    float: left;
    padding-left: 100px;
}


.pic-2{
    height:280px;
    width:420px;
    float: right;
    padding-right: 100px;

}

#Header-1 {
    font-family: 'Lobster', cursive;
    font-size: 35px;
}

.headerBlock {
  background-color: white;
  position: fixed;
  width: 100%;
}

<html>

<head>
<title>Croydon Cycles</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="style.css" rel= "stylesheet" type="text/css">
<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="parallax.min.js"></script>
</head>

<body>

<div class="headerBlock">
<div class="title">
     <img src="http://via.placeholder.com/50x50" alt="Croydon Cycles" align="center">

</div>

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="shop.html">Shop</a></li>
    <li><a href="#">Location</a></li>

</ul>

</div>


<div class="container">



    <div class="parallax" data-parallax="scroll" data-z-index="1">
        <div class="b1">
            <a href="shop.html">

                <input type="button" class="button" value="view all bikes" >
            </a>
        </div>




    </div>
    <p>The Croydon Cycles was founded in 2001 in order to promote and encourage
            all areas of cyclesports. The club has a rich history of racing both on the
            road and track. We also have an active social side and regular training trips away.
            Croydon Cycles is located in mostly around Thornton heath pond,
            however we still are active around all of Croydon.</p>


</div>


<div class="profiles">

        <p id="Header-1">Here are some of the members of Croydon Cycles:</p>

    <div class="pic-1">
        <img src="http://via.placeholder.com/400x400" alt="Proffesional biker"  height="280px" width="420px">
        <p>The Croydon Cycles was founded in 2001 in order to promote and encourage
                all areas of cyclesports. The club has a rich history of racing both on the
                road and track. We also have an active social side and regular training trips away.
                Croydon Cycles is located in mostly around Thornton heath pond,
                however we still are active around all of Croydon.</p>
    </div>



    <div class="pic-2">
    <img src="http://via.placeholder.com/400x400" alt="Proffesional biker"  height="280px" width="420px">
    <p>The Croydon Cycles was founded in 2001 in order to promote and encourage
            all areas of cyclesports. The club has a rich history of racing both on the
            road and track. We also have an active social side and regular traini.</p>
    </div>
</div>

</body>

</html>

关于html - 菜单不会放在视差图像之上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51727420/

10-10 04:10
Powered by LMLPHP ©2024 视差图像 0.044428