Sifa position

Sifa position inaweka njia ya kuweka msimamo wa vipengele. Sifa hii mara nyingi hutumika pamoja na sifa top, right, bottom, left, ambazo huweka mapungufu juu, kulia, chini, kushoto mtawalia.

Kisarufu

csskichagua {
  position: absolute | relative | fixed | static | sticky;
}

Thamani za position

Thamani chaguomsingi: static.

Mfano . Uwekaji msimamo kamili

Weka kipengele kwenye kona ya juu kushoto ya skrini kwa mapungufu madogo:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Mfano . Uwekaji msimamo kamili

Sasa weka kipengele kwenye kona ya juu kulia ya skrini kwa mapungufu madogo:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Mfano . Uwekaji msimamo uliowekwa

Kwa uwekaji msimamo uliowekwa, kipengele kitasalia mahala pale wakati wa kusokota:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Mfano . Uwekaji msimamo wa jamaa

Kwa uwekaji msimamo wa jamaa, kipengele husogezwa kuhusiana na msimamo wake wa kawaida, lakini vipengele vingine hujitahida vile, kana kwamba kipengele hakikusongwa:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

Mfano . Uwekaji ndani

Ikiwa kwa mzazi sifa position ina thamani relative, basin vipengele vilivyowekwa msimamo kamili vitawekwa msimamo kuhusiana na mzazi:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Mfano . Uwekaji ndani

Ikiwa kwa mzazi sifa position ina thamani absolute, basin vipengele vilivyowekwa msimamo kamili vitawekwa msimamo kuhusiana na mzazi:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Mfano . Uwekaji msimamo unaobana

Ikiwa kwa kipengele sifa position ina thamani sticky, basi kipengele hujitahida kama relative, hadi inapofikia msimamo uliowekwa wakati wa kusokota, kisha kinabana kwenye mahali. Tufanye kichwa kinachobana:

html<h1>Kichwa Kikuu cha Tovuti</h1>

<div class="header">kichwa kichwa kichwa</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

Mfano . Bila msimamo

Ikiwa kipengele kinapewa uwekaji msimamo kamili bila kubainisha msimamo, basi kipengele kitasalia kusimama kwenye mahala pale, ambapo ilikuwa imesimama bila uwekaji msimamo, lakini vipengele vingine vitakoma kukigundua:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Mfano . Mhimili mmoja

Kwa uwekaji msimamo kamili unaweza kuweka msimamo kwenye mhimili mmoja tu. Kwa mfano, ikiwa tutaweka sifa top, basi kwa wima kipengele kitawekwa kwenye msimamo unaohitajika, lakini kwa mlalo kitasalia kusimama, pale, palipokuwa pamestahimiliva:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Mfano . Msimamo wote

Kwa uwekaji msimamo kamili unaweza kuweka msimamo kutoka pande zote, bila kutoa upana na urefu. Katika kesi hii, kipengele kitawekwa katikati ya kizuizi cha mzazi:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

Angalia pia