Come allineare a destra il div di posizione fissa all'interno di un div

Question

Il mio codice è come questo.

<div class="outer"> 
    <div class="inner">some text here 
    </div> 
</div> 

CSS:

.outer { 
    max-width:1024px; 
    background-color:red; 
    margin:0 auto; 
} 
.inner { 
    width:50px; 
    border:1px solid white; 
    position:fixed; 
} 

Il div interno che è posizionato a sinistra di default devono essere posizionati a destra w.r.t div esterno e non alla pagina.

Se sto menzionando per avere ragione: 0px; lo fa per fare lo 0px dal browser giusto non dal div esterno.

NOTA: il mio div esterno non ha una larghezza fissa. Regola secondo la risoluzione dello schermo. È un sito web responsive.

Answer 1

Si potrebbe utilizzare un div contenitore:

<div class="outer"> 
    <div class="floatcontainer"> 
     <div class="inner">some text here</div> 
    </div> 
</div> 

quindi utilizzare tale per gestire il float, e rendere suo figlio position: fixed

.outer { 
    width:50%; 
    height:600px; 
    background-color:red; 
    margin:0 auto; 
    position: relative; 
} 
.floatcontainer { 
    float: right; 
} 
.inner { 
    border:1px solid white; 
    position:fixed; 
} 
.floatcontainer, .inner{ 
    width: 50px; 
} 

Answer 2

Perché non si utilizza position:absolute

position:fixed sempre relativa al browser

.outer { 
    width:200px; 
    height:600px; 
    background-color:red; 
    margin:0 auto; 
    position:relative 
} 
.inner { 
    width:50px; 
    border:1px solid white; 
    position:absolute; right:0 
} 

DEMO

---

Se è obbligatorio utilizzare position:fixed poi si può assegnare il valore margin-left , dal momento che stai usando fisso per entrambi i div.

.inner { 
    width:50px; 
    border:1px solid white; 
    position:fixed; margin-left:150px 
} 

DEMO 2

Answer 3

due opzioni. Semplicemente fai galleggiare il div interno o usa il posizionamento assoluto per ottenerlo.

Per il floating è sufficiente impostare float: direttamente sul DIV interno e overflow: nascosto sul DIV esterno.

Per il posizionamento assoluto è sufficiente impostare la posizione: relativa sul DIV esterno e impostare la posizione: assoluta e destra: 0 in alto: 0 sul DIV interno.

Answer 4

Se nel caso, si vuole fare l'elemento .inner come un elemento posizionato fisso e lasciare le altre cose all'interno .outer essere "scorrevole", suggerisco di impostare la posizione di .inner come elemento posizionato assoluto. Quindi, creare un nuovo involucro dopo con overflow:auto:

<div class="outer"> 
    <div class="inner">Some text here...</div> 
    <div class="flow">content</div> <!-- extra markup --> 
</div> 

Ecco una demo: http://jsfiddle.net/tovic/ZLbqn/3/

Answer 5

Penso che questo sia quello che desideri

<div class="outer"> 
    <div class="inner">some text here 
    </div> 
</div> 


.outer { 
    margin: 0 auto; 
    width: 860px; 
    direction: rtl; 
    background-color: black; 
    height: 1200px; 
} 

.inner { 
    float: right; 
    position: fixed; 
    text-align: center; 
    width: 220px; 
    background-color: red; 
    height: 50px; 
}