Question

实际上

^标题

我想把我的选框放在标题后面。我该怎么做？

我尝试了很多东西，问我的同学，但没有人提出想法。

所以这是我的HTML代码

<img class="logo" src="logo.jpeg">
    <marquee>hello world</marquee>

     <ul class="navbar">
        <li><a class="active" href="homepage.html">Home</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="history.html">History</a></li> 
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
        <div class="filler">.</div>
    </ul>`

这是我的CSS（使用了很多课程）

.slideshow {
            height: 400px;
            width: 600px; 
            display: block;
            margin: 0 auto;
        }

        .slideshow2 {
            text-align: center;
            background-color: burlywood;
            font-family: sans-serif;
            font-size: 20px;
            color: chocolate;
            margin: 0;
            padding: 0;
        }

        .sd3 {
            text-decoration: underline;
            color: darkgoldenrod;
        }

        .filler {
            color: bisque;
            background-color: bisque;
            font-size: 34px;
            padding-right: 16px;
        }

        .title {
            background-color: burlywood;
            color:#382E1C;
            font-size: 30px;
            font-family: sans-serif;      
        }

        .img1 {
            width: 500px;
            height: 300px;
            margin: 0;
            padding: 0;
        }

        .bg {
            background-color: #BAA378;
            text-align: center;
        }

        .par{
            background-color: #BAA378;
            font-family: sans-serif;
            font-size: 30px;
            color: #453823;
            margin: 0;
            padding: 0;
        }

        .pricedesc {
            background-color: chocolate;
            color:#382E1C;
            font-size: 30px;
            font-family: sans-serif;
            margin: 0;
            padding: 0;
        }

        .logo {
            position: absolute;
            z-index: 10;
            opacity: 0.75;
            width: 225px;
            height: 125px;
            display: block;
            margin: 0 auto; 
        }

         .filler {
            color: bisque;
            background-color: bisque;
            font-size: 34px;
            padding-right: 16px;
        }

        body {
            background-color: cornsilk;
            width:100%;
        }

        .navbar{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li {
            float: left;
        }

        li a {
            font-size: 20px;
            font-family: sans-serif;
            display: block;
            padding: 8px;
            background-color: bisque;
            color: chocolate;
            text-decoration: none;
            text-align: center;
        }

        li a:hover {
            background-color: burlywood;
        }

        .active {
            background-color:chocolate;
            color: beige;
        }

        h1 {
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            background-color: coral;
            color:blanchedalmond;
            text-align: center
        }

Answer 1

您可以绝对定位图片，并为其提供更高的z-index

img {
  position: absolute;
  z-index: 10;
  opacity: 0.75;
}

<img src="https://unsplash.it/200/200">
<marquee>marquee text goes here</marquee>

我已经让图片透明了，所以你可以看到它下面的文字。

如何将选框放在我的徽标后面？

1 个答案: