Putem specifica, cu un control deosebit, exact unde să fie situate în cele din urmă elementele în fereastra noastră. CSS ne permite să modificăm locația în așa măsură încât poziția unui element pe pagină să nu aibă nicio legătură cu locația sa din codul dvs. Așa cum am văzut în multe din celelalte reguli ale noastre, există două metode de declarare a poziției, fixă și relativă. Aici elementele fixe specifică decalajul pixelilor dintr-o parte sau colț al ferestrei, iar relativ declară că valorile noastre mută conținutul de unde ar fi fost dacă nu l-am fi modificat.
Iată cum am putea să luăm un titlu și să-l forțăm la un decalaj din colțul din stânga sus ca absolut, ceea ce înseamnă că va sta acolo indiferent de ce altceva este deasupra, dedesubt sau în jurul lui:
<style>
h2 {
position:absolute;
left:50px;
top:100px;
}
</style>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The
heading below is placed 50px from the left of the page and 100px from the top of
the page. As this text continues, you will see that the heading sits on top of
the text as if it was not even there. As this text continues, you will see that
the heading sits on top of the text as if it was not even there. As this text
continues, you will see that the heading sits on top of the text as if it was
not even there .As this text continues, you will see that the heading sits on
top of the text as if it was not even there. As this text continues, you will
see that the heading sits on top of the text as if it was not even there. As
this text continues, you will see that the heading sits on top of the text as if
it was not even there. As this text continues, you will see that the heading
sits on top of the text as if it was not even there. As this text continues, you
will see that the heading sits on top of the text as if it was not even
there.</p>
Dacă dorim să mutăm titlul în raport cu locul în care ar fi fost poziționat în mod normal (chiar deasupra paragrafului nostru), trecem la relativ și furnizăm valorile de offset pe care le dorim. Aici, îl vom muta la dreapta, îl vom muta la stânga, și îl vom arăta așa cum a fost:
<style>
h2.pos_left {
position:relative;
left:-20px;
}
h2.pos_right {
position:relative;
left:20px;
}
</style>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal
position</h2>
<h2 class="pos_right">This heading is moved right according to its normal
position</h2>
<p>This is our paragraph that has a heading with relative positioning. Unless we
put a negative bottom offset on our heading large enough to cover it, it will
stay above the paragraph this time. </p>
Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu
Lasă un răspuns