Naprawiono pozycję względem elementu nadrzędnego

Question

Jestem stosunkowo nowy w CSS. Wystąpił problem polegający na tym, że próbuję naprawić element obok jego elementu nadrzędnego. Jestem w stanie to zrobić za pomocą następującego kodu: Element

nadrzędna: Element

#search_results{ 
position:relative; 
} 

dziecka:

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

Działa to dobrze, dopóki okno przeglądarki jest zmieniany. Gdy to nastąpi, stały element zachodzi na jego element macierzysty. Możesz zobaczyć mój problem tutaj: Twittiment

Próbuję naprawić element podrzędny na górze strony i prawej stronie elementu nadrzędnego. Jakieś pomysły?

Answer 1

Zgodnie ze specyfikacją CSS element ustawiony jako fixed jest przymocowany do widoku, a nie do elementu zawierającego.

Krótka odpowiedź brzmi: NIE, nie można mieć elementu fixedposition względem jego elementu nadrzędnego. Zamiast tego można użyć parametru position: absolute; i poprawić parametry podczas uruchamiania za pomocą jQuery/JS.

Answer 2

To, czego chcesz użyć, to pozycja: absolutna. To umieszcza element potomny zgodnie z jego elementem nadrzędnym.

Niektóre odczyty tutaj: http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

Oczywiście można, tylko trzeba dodatkowy 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) 

Zobacz ten skrzypce Zrobiłem dla ciebie :-)

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

Answer 4

Najlepszym sposobem osiągnięcia tego celu jest zapewnienie elementu nadrzędnego CSS Transform. np .:

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