Galleggia un div nell'angolo in alto a destra senza intestazione di pari livello

Question

Avendo uno div e uno h1 all'interno di una sezione, come faccio a far fluttuare il div nell'angolo in alto a destra senza sovrapporre il testo dell'intestazione?

Il codice HTML è il seguente:

<section> 
    <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> 
    <div><button>button</button></div> 
</section> 

• ho cercato una posizione relativa assoluta al genitore ma il testo si sovrappone, http://jsfiddle.net/FnpS8/2/

  

Utilizzando questo codice CSS:

section { position: relative; } 
h1 { display: inline; } 
div { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

• ho provato galleggiare il div a destra, ma non rimane in alto a destra, http://jsfiddle.net/P6xCw/2/

  

Utilizzando questo codice CSS:

h1 { display: inline; } 
div { float: right; } 

So che ci sono molte domande simili ma non sono riuscito a trovarne una che risolva questo caso.

Answer 1

Se è possibile modificare l'ordine degli elementi, il floating funzionerà.

section { 
 
    position: relative; 
 
    width: 50%; 
 
    border: 1px solid; 
 
} 
 
h1 { 
 
    display: inline; 
 
} 
 
div { 
 
    float: right; 
 
}

<section> 
 
    <div> 
 
    <button>button</button> 
 
    </div> 
 

 
    <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> 
 
</section>

Posizionando il divprima il h1 e galleggianti al right, si ottiene l'effetto desiderato.

Answer 2

Un'altra problem solved by the rubber duck:

Il CSS è giusto, ma si devono ancora ricordare che il codice HTML elements order matters: il div deve venire prima l'intestazione. http://jsfiddle.net/Fq2Na/1/

Modificare il codice HTML per avere il div prima della intestazione:

<section> 
<div><button>button</button></div> 
<h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> 
</section> 

E mantenere il vostro CSS per il semplice div { float: right; }.

Answer 3

section { 
    position: relative; 
    width: 50%; 
    border: 1px solid; 
} 
h1 { 
    display: inline; 
} 
div { 
    position: relative; 
    float:right; 
    top: 0; 
    right: 0; 

} 

Answer 4

questo ha funzionato per me:

h1 { 
    display: inline; 
    overflow: hidden; 
} 
div { 
    position: relative; 
    float: right; 
} 

E 'simile al metodo dell'oggetto multimediale, per Stubbornella.

Edit: Come commentano qui di seguito, è necessario inserire l'elemento che sta andando a stare a galla prima che l'elemento che sta per avvolgere (quello nel vostro primo violino)

Answer 5

Sbarazzarsi dal div <Button> involucro utilizzando display:block e float:left in entrambi <Button> e <h1> e specificando il loro width con un position:relative sul Section. Questo approccio ha il vantaggio di non aver bisogno di un altro div solo per posizionare il <Button>

html

<section> 
    <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>  
    <button>button</button> 
</section> 

css

section { 
    position: relative; 
    width: 50%; 
    border: 1px solid; 
    float:left; 
} 
h1 { 
    display: block; 
    width:70%; 
    float:left; 
} 
button 
{ 
    position:relative; 
    top:0; 
    left:0; 
    float:left; 
}