2009-02-23 10 views
28

के साथ सीएसएस फ़्लोटिंग मैं एक पेज के लिए एक साधारण क्षैतिज टैब संरचना स्थापित करने की कोशिश कर रहा हूं, जिस पर मैं काम कर रहा हूं, और मैं ज़ेड-इंडेक्स के साथ फ़्लोटिंग डिव के साथ कुछ परेशानी में भाग रहा हूं।ओवरलैप

एक ब्राउज़र में निम्न कोड देख रहे हैं:

<!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> 

क्यों छोड़ दिया div के नारंगी सीमा सही div की हरी सीमा ओवरलैप नहीं करता है?

उत्तर

60

जेड-इंडेक्स संपत्ति स्थिर रूप से स्थित तत्वों पर लागू नहीं होगी। जेड-इंडेक्स का उपयोग करने के लिए सीएसएस में स्थैतिक (यानि सापेक्ष, पूर्ण, निश्चित) के अलावा किसी भी स्थिति मूल्य को भी शामिल करना चाहिए।

.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; } 

आपको जो चाहिए वह आपको देगा। मैंने स्थिति जोड़ा: सापेक्ष; और। बाएं से 3 (2 से) के जेड-इंडेक्स को बदल दिया और जेड-इंडेक्स को। राइट से 2 (3 से) में बदल दिया।

7

z-index तत्वों पर कोई प्रभाव नहीं है कि तैनात नहीं कर रहे हैं (उदाहरण के लिए position:absolute;)

+2

या 'स्थिति: रिश्तेदार;' –

0

नकारात्मक margin-left है?

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

ऊपरी तत्व के लिए position संपत्ति का उपयोग करें। position:relative से .left जोड़ना।

संबंधित मुद्दे