तत्वों की ऊंचाई और चौड़ाई के आधार पर एक्स और वाई प्रतिशत मानों का अनुवाद करें?

Question

तत्वों का अनुवाद वाई अक्ष 50% इसे अपनी ऊंचाई का 50% नीचे ले जाएगा, माता-पिता की ऊंचाई का 50% जैसा कि मैं उम्मीद करता हूं। माता-पिता तत्व पर इसके अनुवाद प्रतिशत को आधार देने के लिए मैं अनुवाद तत्व कैसे कहूं? या मैं कुछ समझ नहीं रहा हूँ?

http://jsfiddle.net/4wqEm/2/

Answer 1

संपत्ति का अनुवाद में प्रतिशत का उपयोग करने के लिए आपको जावास्क्रिप्ट का उपयोग करने के: http://jsfiddle.net/4wqEm/27/

एचटीएमएल कोड:

<div id="parent"> 
    <div id="children"></div> 
</div>​​​​​​​​​​​​​ 

सीएसएस कोड:

#parent { 
    width: 200px; 
    height: 200px; 
    background: #ff0; 
} 
#children { 
    width: 10%; 
    height: 10%; 
    background: #f00; 
} 

जावास्क्रिप्ट कोड :

parent = document.getElementById('parent'); 
children = document.getElementById('children'); 

parent_height = parent.clientHeight; 
​children_translate = parent_height * 50/100; 
children.style.webkitTransform = "translateY("+children_translate+"px)";​​​​​​​​​​​​​​​​​​​​​​​​​​ 

मुझे आशा है कि मैं आपकी मदद कर सकता हूं और कह सकता हूं कि आपको कोई अन्य समस्या है या नहीं।

Answer 2

अनुवाद में प्रतिशत का उपयोग करते समय, यह स्वयं की चौड़ाई या ऊंचाई को संदर्भित करता है। https://davidwalsh.name/css-vertical-center पर एक नज़र (demo) लें:

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

Answer 3

तुम भी एक अतिरिक्त ब्लॉक का उपयोग करें और चाइल्ड नोड को छोड़कर इसके लिए संक्रमण का उपयोग कर सकते

एचटीएमएल कोड:

<div id="parent"> 
    <div id="childrenWrapper">  
     <div id="children"></div> 
    </div> 
</div>​​​​​​​​​​​​​ 

सीएसएस इस

#parent { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: #ff0; 
} 
#childrenWrapper{ 
    width: 100%; 
    height: 100%; 
} 
#children { 
    width: 10%; 
    height: 10%; 
    background: #f00; 
} 

Answer 4

की तरह कुछ किया जाना चाहिए आप तत्व को पूर्ण स्थान पर रख सकते हैं और प्रतिशत मान को मूल के रूप में लेने के लिए बाएं और शीर्ष संपत्ति का उपयोग कर सकते हैं।

Answer 5

आपका कथन बहुत अनुवादित तत्व से आने वाले प्रतिशतों के बारे में बिल्कुल सही है। अपने मामले में अनुवाद संपत्ति का उपयोग करने के बजाय आपको मूल div के सापेक्ष रहने के लिए पूर्ण स्थिति का उपयोग करना चाहिए। मैंने पूरी तरह से अपने लाल div को लंबवत रूप से तैनात किया है: (पैरेंट div के सापेक्ष स्थिति जोड़ने के बारे में मत भूलना।यह स्थिर डिफ़ॉल्ट के अलावा अन्य) तैनात होना है:

js fiddle pen here

body { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    } 
body > div { 
    width: 200px; 
    height: 200px; 
    background: #ff0; 
    position: relative; 
    } 
body > div > div { 
    width: 10%; 
    height: 10%; 
    -webkit-transform: translateY(-50%); 
    background: #f00; 
    position: absolute; 
    top: 50%; 
    } 

Answer 6

आप VW और VH उपयोग कर सकते हैं व्यूपोर्ट आकार

@keyframes bubbleup { 
    0% { 
    transform: translateY(100vh); 
    } 

    100% { 
    transform: translateY(0vh); 
    } 
} 

Answer 7

मुझे only CSS प्रयोग करने के लिए क्या काम करता है के आधार पर अनुवाद करने के लिए है :

.child { 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

    /* Backward compatibility */ 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
} 

कैसे काम करता है:

• शीर्ष और बाएं स्थिति चाल बच्चे विजेट माता पिता निर्देशांक के अनुसार। चाइल्ड विजेट का टॉप-बाएं कोने बिल्कुल माता-पिता के केंद्र में दिखाई देगा (यह वह नहीं है जिसे हम इस समय चाहते हैं)।
• अनुवाद बच्चे विजेट चले जाएँगे शीर्ष पर -50% और इसका आकार (नहीं माता पिता) के आधार पर छोड़ दिया। इसका मतलब है, विजेट बिल्कुल अपने आप के केंद्र में ले जाया जाएगा।