2012-08-13 9 views
5

मैं ऐसी साइट पर काम कर रहा हूं जो स्थिति का उपयोग करता है: रिश्तेदार div युक्त स्थिति: पूर्ण divs। मैं जिस अवधारणा को मानता हूं उसे समझता हूं, और सबकुछ बढ़िया काम करता है सिवाय इसके कि मुझे कुछ भी करने के लिए top विशेषता नहीं मिल रही है। बाएं काम करता है, लेकिन शीर्ष नहीं। मेरे कोड इस प्रकार है:सीएसएस स्थिति: स्थिति के साथ पूर्ण: रिश्तेदार "शीर्ष" काम नहीं कर रहा

<div id="imagemenu"> 
    <div class="west"> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/west.png" alt="west"> 
    </div> 
    <div class="southwest"> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/southwest.png alt=" southwest "> 
    </div> 
    <div class="south "> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/south.png " alt="south "> 
    </div> 
    <div class="logo "> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/logo.png " alt="Making Music Store "> 
    </div> 
</div> 

सीएसएस

#imagemenu { 
    position: relative; 
} 
.logo img { 
    position: absolute; 
    width: 20%; 
    top: 50%; 
    left: 40%; 
} 
.west img { 
    position: absolute; 
    width: 30%; 
    left: 15%; 
} 
.southwest img { 
    position: absolute; 
    width: 30%; 
    left: 15%; 
} 
.south img { 
    position: absolute; 
    left: 35%; 
} 

साइट adams-web.net/makingmusicstore है और वर्तमान में एक मेस जब तक मैं शीर्ष विशेषता काम करने के लिए मिल सकता है। ऐसा लगता है कि लोगो पृष्ठ के नीचे बहुत नीचे होना चाहिए, लेकिन यह काम नहीं कर रहा है क्योंकि मुझे विश्वास है कि इसे करना चाहिए। मुझे यकीन नहीं है कि मैं क्या खो रहा हूं। जब मैं स्थिर स्थिति को बदलता हूं तो यह काम करता है, लेकिन यह स्थिति को सही तरीके से नहीं रखता है।

उत्तर

7

अरे अब शीर्ष absolutediv

इस तरह

की तुलना में अधिक इस्तेमाल किया शीर्ष % अपने माता पिता div ऊंचाई निर्धारित करें: आप अपने माता पिता div ऊंचाई से करने के लिए इस्तेमाल को परिभाषित नहीं है, तो

.parent { 
    position: relative; 
    height: 100px; 
} 
.child { 
    position: absolute; 
    top: 50%; 
} 

px value in top

.child { 
    top: 100px; 
} 
+0

बेशक! आपकी प्रतिक्रिया के लिए धन्यवाद, मैंने इस पर बहुत लंबे समय तक काम किया, और जवाब इतना आसान था। –

5

#imagemenu

करने के लिए width और height जोड़े उदाहरण के लिए:

#imagemenu { 
    width: 100%; 
    height: 400px; 
} 

फिर अगर position: absolute या काम नहीं कर रहा जाँच करें।

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