CSS Floating mit Überlappung

Ich versuche, eine einfache horizontale Registerkarte Struktur für eine Seite, an der ich arbeite, einzurichten, und ich habe Probleme mit Floating-Div kombiniert mit Z-Index.CSS Floating mit Überlappung

Anzeigen von den folgenden Code in einem Browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
     #main { width: 500px; z-index: 1;} 

     .left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 2; margin-right: -2px } 
     .right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; } 

     .clear { clear: both; } 
</style> 
</head> 

<body> 
    <div id="main"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
      <br /> 
      RIGHT 
     </div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

Warum nicht die orange Grenze des linken div überlappen sich die grüne Grenze des rechten div?

Quelle

2009-02-23 Michael

Z-Index-Eigenschaft wird nicht auf statisch positionierte Elemente angewendet. Um den Z-Index zu verwenden, muss das CSS auch einen anderen Positionswert als statisch enthalten (dh relativ, absolut, fest).

.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; } 
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }

Wird Ihnen geben, was Sie wollen, denke ich. Ich habe Position hinzugefügt: relativ; und änderte den Z-Index von .left auf 3 (von 2) und änderte den Z-Index von .right auf 2 (von 3).

Quelle

2009-02-23 23:01:43

z-index hat keine Auswirkung auf Elemente, die nicht positioniert sind (zB position:absolute;)

Quelle

2009-02-23 23:02:24

oder 'position: relative;' –

Negative margin-left?

.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; margin-left: -5px;}

Quelle

2009-02-23 23:04:46 BenB

Verwenden Sie die position -Eigenschaft für Element oberen. Hinzufügen von position:relative zu .left.

Quelle

2015-03-26 03:21:59 Gelio

CSS Floating mit Überlappung

Antwort

Verwandte Themen