Html 非故意重叠部分_Html_Css

Html 非故意重叠部分

html css

Html 非故意重叠部分,html,css,Html,Css,我有两个部分：prodotto_部分（顶部部分）和catalogo部分（底部部分）。问题是catalogo部分的某些元素与顶部部分重叠。使用GoogleChromeInspect元素，我看到catalogo部分像容器一样高，而prodotto_部分高0。我如何解决它 <body> <div id="pop_background"></div> <div id="pop_box"> <span id="close_button

我有两个部分：prodotto_部分（顶部部分）和catalogo部分（底部部分）。问题是catalogo部分的某些元素与顶部部分重叠。使用GoogleChromeInspect元素，我看到catalogo部分像容器一样高，而prodotto_部分高0。我如何解决它

<body>
  <div id="pop_background"></div>

  <div id="pop_box">
    <span id="close_button">�</span>
    <h1>Hai qualche domanda?</h1>
    <p>Vuoi avere maggiori informazioni sui nostri prodotti?<br> Ti bastera' compilare questo form e ti risponderemo il prima possibile </p>
    <form name="send_message" action="http://bicicletteria.altervista.org/send_message.php" method="POST" onsubmit="return validateForm()">
      <label for="name">Nome*: <input type="text" name="name" required=""></label>
      <label for="email">Email*: <input type="text" name="email" required=""></label>
      <label for="text" id="mex">Messaggio: <textarea rows="10" cols="21" name="message" required=""></textarea></label>
      <label for="send"> <input type="submit" id="send" value="Invia messaggio"></label>
    </form>
  </div>


  <header id="top">
    <img id="logo" src="./Bicicletteria_files/logo.png" alt="Bicicletteria">
    <nav id="topmenu">
      <ul>
        <li class="home"><a href="http://bicicletteria.altervista.org/index.php">HOME</a></li>
        <li class="catalogo"><a href="http://bicicletteria.altervista.org/catalogo.php">CATALOGO</a></li>
        <li class="chi_siamo"><a href="http://bicicletteria.altervista.org/chi_siamo.html">CHI SIAMO</a></li>
        <li><a href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=6#" id="open">CONTATTACI</a></li>
        <li><a href="http://bicicletteria.altervista.org/cart.php">CARRELLO</a></li>
      </ul>
    </nav>
    <section id="ricerca">
      <form name="ricerca" method="get" action="http://bicicletteria.altervista.org/catalogo.php">
        <input type="search" class="srcbar" id="s" name="search" placeholder="Cerca sul sito">
        <input type="submit" class="srcbar" id="buttonsearch" value="Cerca">
      </form>
    </section>
    <section id="login">
      <img src="./Bicicletteria_files/Icon-user.png" alt="login" width="15px" height="15px">
      <a href="http://bicicletteria.altervista.org/login.php">LOGIN</a>
    </section>

  </header>

  <div id="container">
    <section id="prodotto_section">
      <span id="up">
        <span id="sinistra">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
        </span>
        <span id="centro">
          <img id="main" src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg">
          <p id="desc">Ideato per praticare ciclismo da corsa con frequenza regolare e con grande comfort.
Bici da corsa confortevole e stremamente efficace grazie alla forcella in carbonio e alle 27 velocit�!</p>
</span>
<span id="destra">
  <p id="nome_prodotto">TRIBAN 520 FB</p>
  <p id="marca">BTWIN</p>
  <p id="prezzo">459.95�</p>
  <form name="aggiungi" method="POST" action="http://bicicletteria.altervista.org/addProductDB.php">
            <input type="hidden" name="ID_bici" value="6">
              <select name="taglia" id="dimensione">
                <option value="24" title="24&#39;&#39;">24''</option>
                <option value="26" title="26&#39;&#39;">26''</option>
                <option value="28" title="28&#39;&#39;">28''</option>
              </select>
              <input type="number" id="qnt24" name="qnt24" value="1" min="0" class="qnt_number" style="visibility: visible;" max="15">
              <input type="number" id="qnt26" name="qnt26" value="0" min="0" class="qnt_number" style="visibility: hidden;" max="15">
              <input type="number" id="qnt28" name="qnt28" value="0" min="0" class="qnt_number" style="visibility: hidden;" max="7">
              <button id="add">Aggiungi al carrello</button>
            </form>
          </span>
        </span>
      </section>
    <section id="catalogo">
    <label id="filtro" for="ordina">Ordina per:
      <select>
        <option value="--">--</option>
          <option value="prezzo">prezzo</option>
          <option value="novita">novita</option>
        </select>
     </label>
          <header>
            <h1>CATALOGO</h1>
          </header>
<article class="products">
  <span class="miniatura">
    <span id="min" class="pic">
      <ul class="vid-rotater" style="visibility: visible;">
        <li class="active"><span>0</span></li>
        <li class=""><span>1</span></li>
        <li class=""><span>2</span></li>
        <li class=""><span>3</span></li>
        <li class=""><span>4</span></li>
        <li class=""><span>5</span></li>
      </ul>
      <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=6" target="_top" style="text-decoration: none;">
        <img class="lazy" src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="display: block; visibility: visible;">
        <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
        <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
        <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
        <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
        <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;"></a>
      </span>
    </span>
    <section class="descrizione">
      <p class="modello">TRIBAN 520 FB<br><br></p>
      <p class="marca">BTWIN<br><br></p>
      <p class="prezzo">459.95�<br></p>
    </section>
  </article>
  <article class="products">
    <span class="miniatura">
      <span id="min" class="pic">
        <ul class="vid-rotater" style="visibility: visible;">
          <li class="active"><span>0</span></li>
          <li class=""><span>1</span></li>
          <li class=""><span>2</span></li>
          <li class=""><span>3</span></li>
          <li class=""><span>4</span></li>
          <li class=""><span>5</span></li>
        </ul>
        <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=5" target="_top" style="text-decoration: none;">
          <img class="lazy" src="./Bicicletteria_files/foto 1(1).jpg" style="display: block; visibility: visible;">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
          <img src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="visibility: hidden;">
        </a>
        </span>
      </span>
      <section class="descrizione">
        <p class="modello">MACH 740 NERA<br><br></p>
        <p class="marca">BTWIN<br><br></p>
        <p class="prezzo">1500�<br></p>
      </section>
    </article>
    <article class="products">
      <span class="miniatura">
        <span id="min" class="pic">
          <ul class="vid-rotater" style="visibility: visible;">
            <li class="active"><span>0</span></li>
            <li class=""><span>1</span></li>
            <li class=""><span>2</span></li>
            <li class=""><span>3</span></li>
            <li class=""><span>4</span></li>
            <li class=""><span>5</span></li>
          </ul>
          <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=4" target="_top" style="text-decoration: none;">
            <img class="lazy" src="http://bicicletteria.altervista.org/res/bici%201/foto%201.jpg" style="display: block; visibility: visible;">
            <img src="./Bicicletteria_files/foto 2(1).jpg" style="visibility: hidden;">
            <img src="./Bicicletteria_files/foto 3(2).jpg" style="visibility: hidden;">
            <img src="./Bicicletteria_files/foto 4(1).jpg" style="visibility: hidden;">
            <img src="./Bicicletteria_files/foto 5(1).jpg" style="visibility: hidden;">
            <img src="./Bicicletteria_files/foto 6.jpg" style="visibility: hidden;"></a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">TRIBAN 540 FB<br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">659.9�<br></p>
        </section>
      </article>
      <article class="products">
        <span class="miniatura">
          <span id="min" class="pic">
            <ul class="vid-rotater" style="visibility: visible;">
              <li class="active"><span>0</span></li>
              <li class=""><span>1</span></li>
              <li class=""><span>2</span></li>
              <li class=""><span>3</span></li>
              <li class=""><span>4</span></li>
              <li class=""><span>5</span></li>
            </ul>
            <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=1" target="_top" style="text-decoration: none;">
              <img class="lazy" src="./Bicicletteria_files/foto 1(3).jpg" style="display: block; visibility: visible;">
              <img src="./Bicicletteria_files/foto 2(2).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 3(3).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 4(2).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 5(2).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 6(1).jpg" style="visibility: hidden;">
            </a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">ROCKRIDER 520<br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">349.99�<br></p>
        </section>
      </article>
      <article class="products">
        <span class="miniatura">
          <span id="min" class="pic">
            <ul class="vid-rotater" style="visibility: visible;">
              <li class="active"><span>0</span></li>
              <li class=""><span>1</span></li>
              <li class=""><span>2</span></li>
              <li class=""><span>3</span></li>
              <li class=""><span>4</span></li>
              <li class=""><span>5</span></li>
            </ul>
            <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=7" target="_top" style="text-decoration: none;">
              <img class="lazy" src="./Bicicletteria_files/foto 1(4).jpg" style="display: block; visibility: visible;">
              <img src="./Bicicletteria_files/foto 2(3).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 3(4).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 4(3).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 5(3).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 8(1).jpg" style="visibility: hidden;">
            </a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">PIEGHEVOLE TILT 740 <br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">657.95�<br></p>
        </section>
      </article>
      <article class="products">
        <span class="miniatura">
          <span id="min" class="pic">
            <ul class="vid-rotater" style="visibility: visible;">
              <li class="active"><span>0</span></li>
              <li class=""><span>1</span></li>
              <li class=""><span>2</span></li>
              <li class=""><span>3</span></li>
              <li class=""><span>4</span></li>
              <li class=""><span>5</span></li>
            </ul>
            <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=8" target="_top" style="text-decoration: none;">
              <img class="lazy" src="./Bicicletteria_files/foto 1(5).jpg" style="display: block; visibility: visible;">
              <img src="./Bicicletteria_files/foto 2(4).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 1(5).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 4(4).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 5(4).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 6(2).jpg" style="visibility: hidden;">
            </a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">ELETTRICA BEBIKE 700<br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">999.99�<br></p>
        </section>
      </article>
      <article class="products">
        <span class="miniatura">
          <span id="min" class="pic">
            <ul class="vid-rotater" style="visibility: visible;">
              <li class="active"><span>0</span></li>
              <li class=""><span>1</span></li>
              <li class=""><span>2</span></li>
              <li class=""><span>3</span></li>
              <li class=""><span>4</span></li>
              <li class=""><span>5</span></li>
            </ul>
            <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=9" target="_top" style="text-decoration: none;">
              <img class="lazy" src="./Bicicletteria_files/foto 1(6).jpg" style="display: block; visibility: visible;">
              <img src="./Bicicletteria_files/foto 2(5).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 3(5).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 4(5).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 5(5).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 6(3).jpg" style="visibility: hidden;">
            </a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">ELETTRICA BEBIKE 500<br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">749.95�<br></p>
        </section>
      </article>
      <article class="products">
        <span class="miniatura">
          <span id="min" class="pic">
            <ul class="vid-rotater" style="visibility: visible;">
              <li class="active"><span>0</span></li>
              <li class=""><span>1</span></li>
              <li class=""><span>2</span></li>
              <li class=""><span>3</span></li>
              <li class=""><span>4</span></li>
              <li class=""><span>5</span></li>
            </ul>
            <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=10" target="_top" style="text-decoration: none;">
              <img class="lazy" src="./Bicicletteria_files/foto 1(7).jpg" style="display: block; visibility: visible;">
              <img src="./Bicicletteria_files/foto 2(6).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 3(6).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 4(6).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 5(6).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 6(4).jpg" style="visibility: hidden;">
            </a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">CORSA ULTRA 700 AF<br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">999.99�<br></p>
        </section>
      </article>
      <article class="products">
        <span class="miniatura">
          <span id="min" class="pic">
            <ul class="vid-rotater" style="visibility: visible;">
              <li class="active"><span>0</span></li>
              <li class=""><span>1</span></li>
              <li class=""><span>2</span></li>
              <li class=""><span>3</span></li>
              <li class=""><span>4</span></li>
              <li class=""><span>5</span></li>
            </ul>
            <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=11" target="_top" style="text-decoration: none;">
              <img class="lazy" src="./Bicicletteria_files/foto 1(8).jpg" style="display: block; visibility: visible;">
              <img src="./Bicicletteria_files/foto 3(7).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 4(7).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 5(7).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 7(2).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 8(2).jpg" style="visibility: hidden;">
            </a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">CORSA TRIBAN 540<br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">799.99�<br></p>
        </section>
      </article>
      <article class="products">
        <span class="miniatura">
          <span id="min" class="pic">
            <ul class="vid-rotater" style="visibility: visible;">
              <li class="active"><span>0</span></li>
              <li class=""><span>1</span></li>
              <li class=""><span>2</span></li>
              <li class=""><span>3</span></li>
              <li class=""><span>4</span></li>
              <li class=""><span>5</span></li>
            </ul>
            <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=12" target="_top" style="text-decoration: none;">
              <img class="lazy" src="./Bicicletteria_files/foto 2(7).jpg" style="display: block; visibility: visible;">
              <img src="./Bicicletteria_files/foto 3(8).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 4(8).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 6(5).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 8(3).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 9(1).jpg" style="visibility: hidden;">
            </a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">MTB ROCKRIDER 340 AZ<br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">169.96�<br></p>
        </section>
      </article>
      <article class="products">
        <span class="miniatura">
          <span id="min" class="pic">
            <ul class="vid-rotater" style="visibility: visible;">
              <li class="active"><span>0</span></li>
              <li class=""><span>1</span></li>
              <li class=""><span>2</span></li>
              <li class=""><span>3</span></li>
              <li class=""><span>4</span></li>
              <li class=""><span>5</span></li>
            </ul>
            <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=13" target="_top" style="text-decoration: none;">
              <img class="lazy" src="./Bicicletteria_files/foto 1(9).jpg" style="display: block; visibility: visible;">
              <img src="./Bicicletteria_files/foto 2(8).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 3(9).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 4(9).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 5(8).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 6(6).jpg" style="visibility: hidden;">
            </a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">ROCKRIDER 340 ARANCI<br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">199.95�<br></p>
        </section>
      </article>
      <article class="products">
        <span class="miniatura">
          <span id="min" class="pic">
            <ul class="vid-rotater" style="visibility: visible;">
              <li class="active"><span>0</span></li>
              <li class=""><span>1</span></li>
              <li class=""><span>2</span></li>
              <li class=""><span>3</span></li>
              <li class=""><span>4</span></li>
              <li class=""><span>5</span></li>
            </ul>
            <a class="frame" href="http://bicicletteria.altervista.org/catalogo.php?ID_bici=14" target="_top" style="text-decoration: none;">
              <img class="lazy" src="./Bicicletteria_files/foto 1(10).jpg" style="display: block; visibility: visible;">
              <img src="./Bicicletteria_files/foto 2(9).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 3(10).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 5(9).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 6(7).jpg" style="visibility: hidden;">
              <img src="./Bicicletteria_files/foto 8(4).jpg" style="visibility: hidden;">
            </a>
          </span>
        </span>
        <section class="descrizione">
          <p class="modello">ROCKRIDER 340 GIALLA<br><br></p>
          <p class="marca">BTWIN<br><br></p>
          <p class="prezzo">199.95�<br></p>
        </section>
      </article>
      <a href="http://bicicletteria.altervista.org/catalogo.php?pag=2&amp;&amp;filter=" .="" class="next-prev"><center><img src="./Bicicletteria_files/next.jpg"></center></a>
     </section>
  </div>

  <footer>
    <dl>
      <dt>Autori:</dt>
      <dd></dd>
      <dd></dd>
      <br>
      <dt> Sito web progettato a fini scolastici</dt>
    </dl>
  </footer>
</body></html>


�
你是说多曼达？
你是否能提供最新的信息？
Ti bastera的汇编要求形成最有可能的风险
诺姆*：
电邮*：
梅萨吉奥：







这是一个非常舒适的房间。
在碳和其他27%的速度下，使用corsa Conforterevole stremamente grazie alla forcella有效�!
TRIBAN 520 FB
BTWIN
459.95�
24''
26''
28''
卡雷洛酒店
序号：
--
前奏曲
诺维塔
目录
TRIBAN 520 FB


BTWIN


459.95�

马赫数740奈拉


BTWIN


1500�

TRIBAN 540 FB


BTWIN


659.9�

ROCKRIDER 520


BTWIN


349.99�

PIEGHEVOLE TILT 740
BTWIN


657.95�

ELETTRICA BEBIKE 700


BTWIN


999.99�

ELETTRICA BEBIKE 500


BTWIN


749.95�

CORSA ULTRA 700 AF


BTWIN


999.99�

CORSA TRIBAN 540


BTWIN


799.99�

MTB ROCKRIDER 340 AZ


BTWIN


169.96�

ROCKRIDER 340 ARANCI


BTWIN


199.95�

ROCKRIDER 340 GIALLA


BTWIN


199.95�

奥托里：


最后一个网站

css太长，无法粘贴到这里，我正在附加一个JSFIDLE链接

如果您尝试扩展html页面，h1和选择标记将位于橙色按钮下方

我想这就是您需要的

如有其他情况，请在备注中注明

我添加了以下CSS：

header, #catalogo {
  clear:both;
}

这使得“Catalogo”标题和

选择占据了整行，因此它们必须放在第一部分下面