Posizione fissa relativa all'elemento padre

Question

Sono relativamente nuovo al CSS. Ho incontrato un problema in cui sto cercando di correggere un elemento accanto al suo elemento genitore. Sono in grado di farlo con il seguente codice: elemento

principale: elemento

#search_results{ 
position:relative; 
} 

bambini:

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

Questo funziona bene fino a quando viene ridimensionata la finestra del browser. Quando ciò accade, l'elemento fisso si sovrappone al suo elemento genitore. È possibile vedere il mio problema qui: Twittiment

Sto cercando di correggere l'elemento figlio nella parte superiore della pagina e il lato destro dell'elemento padre. Qualche idea?

Answer 1

Come per la specifica CSS, l'elemento posizionato fixed è stato fissato sul viewport e non sull'elemento che lo contiene.

Quindi la risposta breve è NO, non si può avere un fixedposition elemento rispetto al suo elemento genitore. È possibile utilizzare position: absolute; invece e modificare i parametri topleftrightbottom in esecuzione utilizzando jQuery/JS.

Answer 2

Quello che si desidera utilizzare è la posizione: assoluta. Questo posiziona l'elemento figlio in base al suo elemento padre.

alcune letture qui: http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

Naturalmente è possibile, solo bisogno di un div extra!

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

Vedere questo violino che ho fatto per te :-)

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

Answer 4

Il modo migliore per raggiungere questo obiettivo è quello di dare un elemento genitore trasformare CSS. es .:

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