2017-12-22 79 views
7

में पूर्ण स्थान पर स्थानांतरित होने पर div छोड़ने की जगह मैं पूर्ण स्थिति को समझने की कोशिश कर रहा हूं। मैं नीचे दिए कोड स्निपेटटीडी

div#div1 { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100px; 
 
    border: 1px solid green; 
 
    background-color: green; 
 
    width: 100%; 
 
} 
 

 
td { 
 
    position: relative; 
 
    border: 1px solid blue; 
 
    height: 18px; 
 
    width: 100%; 
 
} 
 

 
table { 
 
    width: 100%; 
 
}
<table> 
 
    <tr> 
 
    <td> 
 
     <div id="div1"> 
 
     This is a heading with an absolute position 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

मैं कारण पूर्ण स्थिति को शीर्ष में कुछ अतिरिक्त सफेद स्थान हो रही है। जब मैं top:0px निर्दिष्ट करता हूं, तो यह ठीक काम कर रहा है।

क्या कोई बता सकता है कि केवल बाएं और दाएं स्थिति का उपयोग करते समय कुछ जगह पीछे क्यों छोड़ी गई है।

उत्तर

8

डिफ़ॉल्ट vertical-align तालिका सेल के लिए baseline है:

नीचे दिए गए उदाहरण देखें। इसका प्रभाव पहले <table> में देखा जा सकता है।

यह तालिका सामग्री, पाठ या <div>, लंबवत केंद्र के चारों ओर रखने के लिए कारण बनता है।

यदि आप शीर्ष पर <div> स्थानांतरित करना चाहते हैं, तो vertical-align: top; चाल करेगा। या top: 0;

div#div1 { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100px; 
 
    border: 1px solid green; 
 
    background-color: green; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
td { 
 
    position: relative; 
 
    border: 1px solid blue; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
table { 
 
    width: 100%; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     Some text 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <table> 
 
    <tr> 
 
     <td> 
 
     <div id="div1">This is a heading with an absolute position</div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

+0

कम से कम कोई है जो को ध्यान से पढ़ा है अंत;) +1 –

+0

** 'पैडिंग' ** को भी हटाने के लिए मत भूलना। यह बाकी की जगह को हटा देगा। – weBBer

+0

@weBer कोई पैडिंग नहीं है और यह ** रिक्त स्थान को हटाने के बारे में नहीं है ** लेकिन हमारे पास –

2

ऐसा इसलिए है क्योंकि आपने <div> को <td> टैग में डाल दिया है।

तालिका कक्ष की आधार लंबवत स्थिति मध्य है।

div { 
 
    background-color: yellow; 
 
    width: 100%; 
 
} 
 

 
div#absolute { 
 
    position: absolute; 
 
} 
 

 
div#absolute-top0 { 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
table { 
 
    width: 100%; 
 
} 
 

 
td { 
 
    border: 1px solid blue; 
 
    height: 40px; 
 
    padding: 0; 
 
    position: relative; 
 
    width: 100%; 
 
}
<table> 
 
    <tr> 
 
     <td> 
 
      <div> 
 
       This is a div <b>without</b> an absolute position. 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div id="absolute"> 
 
       This is a div <b>with</b> an absolute position. 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <div id="absolute-top0"> 
 
       This is a div <b>with</b> an absolute position and top: 0. 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table>

+0

@weBer कोई गद्दी है और यह ** रिक्त स्थानों को हटाकर ** नहीं के बारे में है, लेकिन क्यों हम रिक्त स्थान –

-1

है ऐसा इसलिए है क्योंकि आप यहाँ दे दिया है टीडी सापेक्ष स्थिति। इसे पूर्ण रूप से भी बदलें। आपके पास वहां कोई जगह नहीं होगी।

यहाँ =>DEMO

div#div1 { 
    position: absolute; 
    top: 20px; 
    left: 0; 
    right:0; 
    height:100px; 
    border: 1px solid green; 
    background-color:green; 
    width:100%; 
} 
td { 
    position:absolute; 
    background:red; 
    height:18px; 
    width:100%;  
} 
table { 
    width:100%; 
} 

<table> 
<tr> 
    <td> 
    <div id="div1">This is a heading with an absolute position</div> 
</td> 
</tr> 

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