Ana öğeye göre sabit konum

Question

CSS'ye nispeten yeniyim. Üst öğesinin yanında bir öğe düzeltmeye çalıştığım bir soruna girdim. Aşağıdaki kod ile bunu mümkün duyuyorum:

Üst öğe:

#search_results{ 
position:relative; 
} 

Çocuk elemanı: tarayıcı penceresi resized kadar

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

Bu iyi çalışır. Bu meydana geldiğinde, sabit eleman ana eleman ile üst üste gelir. Ben sayfanın üst ve üst elemanın sağ tarafına alt öğeyi düzeltmek için çalışıyorum Twittiment

: Burada sorunumu görebilirsiniz. Herhangi bir fikir?

Answer 1

CSS Spec'a göre, fixed konumlandırılmış öğe, görüntüleme elemanına değil, görünüm öğesine sabitlenir. o ana öğe var için

da kısa cevap HAYIR, sen bir fixedposition eleman akrabası olamaz. Bunun yerine position: absolute;'u kullanabilir ve jQuery/JS kullanarak çalıştırmada topleftrightbottom parametrelerini değiştirebilirsiniz.

Answer 2

Kullanmak istediğiniz konum: mutlak. Bu, alt öğeyi ana öğeye göre yerleştirir. Burada

Bazı okumalar: yapabilirsiniz Tabii http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

, sadece fazladan div gerek!

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

Ben

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

Answer 4

iyi yolu :-) sizin için yapılmış bu keman ulaşmak için bakınız bu ana elemanına kendine dönüşümü css vermektir. örn .:

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