पैरेंट तत्व

Question

से संबंधित निश्चित स्थिति मैं सीएसएस के लिए अपेक्षाकृत नया हूं। मैंने एक समस्या में भाग लिया है जहां मैं अपने मूल तत्व के बगल में एक तत्व को ठीक करने की कोशिश कर रहा हूं। मैं निम्नलिखित कोड के साथ ऐसा करने में सक्षम हूँ:

जनक तत्व:

#search_results{ 
position:relative; 
} 

बाल तत्व:

.total { 
position: fixed; 
top:10px; 
width:250px; 
left: 75%; 
/*overflow: hidden;*/ 
margin-left: -125px; 
} 

यह ठीक काम करता है जब तक ब्राउज़र विंडो आकार दिया जाता है। जब ऐसा होता है, तो निश्चित तत्व इसके मूल तत्व को ओवरलैप करता है। आप मेरी समस्या यहाँ देख सकते हैं: Twittiment

मैं पेज के शीर्ष और माता पिता के तत्व के दाएँ हाथ की ओर करने के लिए चाइल्ड तत्व ठीक करने के लिए कोशिश कर रहा हूँ। कोई विचार?

Answer 1

सीएसएस स्पेक के अनुसार, fixed पर स्थित तत्व व्यूपोर्ट पर तय किया गया है और युक्त तत्व नहीं है।

तो संक्षिप्त उत्तर नहीं है, आपके पास इसके मूल तत्व के सापेक्ष fixedposition तत्व नहीं हो सकता है। आप इसके बजाय position: absolute; का उपयोग कर सकते हैं और jQuery/JS का उपयोग कर रन पर topleftrightbottom पैरामीटर का उपयोग कर सकते हैं।

Answer 2

आप जो उपयोग करना चाहते हैं वह स्थिति है: पूर्ण। यह बच्चे के तत्व को इसके मूल तत्व के अनुसार रखता है।

यहाँ कुछ रीडिंग: http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

पाठ्यक्रम आप कर सकते हैं के

, बस एक अतिरिक्त div की जरूरत है!

<div class="fixed-wrapper"> 
    <div class="close-wrapper"> 
    <div class="close"></div> 
    </div> 
</div> 

body 
    background: gray 
    height: 8000px 

.fixed-wrapper 
    position: fixed 
    top: 20px 
    left: 0 
    right: 0 

.close-wrapper 
    max-width: 1200px 
    position: relative 

.close 
    background: #fff 
    width: 30px 
    height: 30px 
    position: absolute 
    right: 0 
    border: 1px solid #515151 
    &:before,&:after 
    width: 25px 
    height: 1px 
    background: #515151 
    content: '' 
    position: absolute 
    top: 50% 
    left: 50% 
    display: block 
    @include transform(translate(-50%, -50%) rotate(45deg)) 
    &:after 
    transform: translate(-50%, -50%) rotate(-45deg) 

इस बेला मैं आपके लिए बनाया :-)

http://codepen.io/marinagallardo/pen/mJyqaN

Answer 4

सबसे अच्छा तरीका प्राप्त करने के लिए देखें इस पेरेंट तत्व एक सीएसएस बदलने दे रहा है। उदाहरण:

.relative{ 
    transform: translateX(0); // this will act like relative parent 
} 
.fixed{ 
    position: fixed; 
    left:0; 
    top:0; 
    width:100%; // width will be relative to the width of .relative 
}