Stil = "konum: mutlak" ve stil = "konum: göreceli" arasındaki fark

103

Herhangi biri bana arasındaki Fark söyleyebilir style = "position:absolute"ve style = "position:relative" ve nasıl durumunda farklılık ben eklemek div/ span/ inputelemanları?

absoluteŞu anda kullanıyorum ama relativeaynı zamanda keşfetmek istiyorum . Bu konumlandırmayı nasıl değiştirecek?

css css-position

— Varun
kaynak

1

CSS 2.1'deki 'position' özelliği .

— Josh Lee

@rolfl Hm, bu düzenleme 3 yaşındaki bir soru için gerçekten gerekli miydi? Ben buna "çok küçük" derdim.

— Mr Lister

3

@MrLister Bir 'önerilen düzenleme' inceleme kuyruğunda geldi .... Yaşı fark etmedim. Ancak, 60 saniyelik eski bir soru olsaydı, bir fark yaratır mıydı?

— rolfl

@rolfl Pek değil; Yine de "çok küçük" oyu verirdim.

— Mr Lister

178

Mutlak konumlandırma, öğenin sayfa düzeninin normal akışının tamamen dışına çıkarılması anlamına gelir. Sayfadaki diğer öğeler söz konusu olduğunda, kesinlikle konumlandırılmış öğe mevcut değildir. Öğenin kendisi, left, right, top and bottomöznitelikleri kullanarak belirlediğiniz konumda, diğer her şeyin "üstüne" ayrı ayrı çizilir .

Bu özniteliklerle belirttiğiniz konumu kullanarak, öğe daha sonra konum özniteliği ( statickonum özniteliği belirtilmediğinde sayfa öğeleri varsayılan olarak statiktir) veya belge gövdesi (tarayıcı viewport) böyle bir ata yoksa.

Örneğin, bu koda sahip olsaydım:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... <div>tarayıcı görüntü alanının üst kısmından 20px ve sol kenarından 20px olarak konumlandırılır.

Ancak böyle bir şey yaptıysam:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... daha sonra innerdiv , div'in üstünden outer20px ve sol kenarından 20px outerkonumlandırılır, position:staticçünkü onu açıkça kullanmak üzere ayarladığımız için div ile konumlandırılmaz position:relative.

Öte yandan, göreli konumlandırma, hiçbir konumlandırma olmadığını belirtmek gibidir, ancak left, right, top and bottomnitelikler, öğeyi normal düzenlerinin dışına "iter". Sayfadaki öğelerin geri kalanı, öğe yine de normal yerindeymiş gibi yerleştirilir.

Örneğin, bu koda sahip olsaydım:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... daha sonra üç <span>öğe de üst üste binmeden yan yana oturur.

İkinciyi <span>göreceli konumlandırmayı kullanacak şekilde ayarlarsam, şöyle:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... daha sonra Span2, Span1'in sağ tarafı ile 5px örtüşür. Span1 ve Span3, ilk örnekte olduğu gibi tam olarak aynı yerde oturur ve Span2'nin sağ tarafı ile Span3'ün sol tarafı arasında 5 piksellik bir boşluk bırakır.

Umarım bu işleri biraz açıklığa kavuşturur.

— AgentConundrum
kaynak

39

Göreli konumlandırma: Eleman, görüntü alanı koordinat ekseninden uzak bir konumda kendi koordinat eksenlerini oluşturur. Belge akışının bir parçasıdır ancak kaymıştır.

Mutlak konumlandırma: Bir eleman, üst öğeleri arasında mevcut en yakın koordinat eksenlerini arar. Eleman daha sonra bu koordinat ekseninden ofsetler belirtilerek konumlandırılır. Belge normal akışından kaldırılır.

Kaynak

— Premraj
kaynak

15

'A List Apart'tan bu konumlandırma makalesine kesinlikle göz atmak isteyeceksiniz . CSS konumlandırmanın gizemini çözmesine yardımcı oldu (bu makaleden önce bana çılgınca geldi).

— jbrennan
kaynak

8

CSS konumlandırmayla, bir öğeyi sayfanızda tam olarak istediğiniz yere yerleştirebilirsiniz.

CSS konumlandırmayı kullanacağınız zaman, yapmanız gereken ilk şey, tarayıcıya mutlak veya göreceli konumlandırma kullanıp kullanmayacağınızı bildirmek için CSS özelliği konumunu kullanmaktır.

Her iki Pozisyon da farklı özelliklere sahip. CSS'de Konum'u ayarladıktan sonra, üst, sağ, alt, sol niteliklerini kullanabilirsiniz.

Mutlak Konum

Bir mutlak konum öğesi, statik dışında bir konuma sahip olan ilk ana öğeye göre konumlandırılır.

Göreceli Konum

Göreceli olarak konumlandırılmış bir eleman, normal konumuna göre konumlandırılır.

Bir öğeyi göreceli olarak konumlandırmak için, özellik konumu göreceli olarak ayarlanır. Mutlak ve göreceli konumlandırma arasındaki fark, konumun nasıl hesaplandığıdır.

Daha fazla bilgi: Konum Göreli ve Mutlak

— GowriShankar
kaynak

6

Tamam, burada çok açık cevap ... temelde göreceli konum önceki öğeye veya pencereye göredir , ancak mutlak bir üst ve sol kullanırsanız bir üst öğe olmadığı sürece diğer öğeleri umursamaz ...

Farklılıkları göstermeniz için oluşturduğum örneğe bakın ...

Ayrıca sizin için oluşturduğum css'i kullanarak eylem halinde görebilirsiniz, mutlak ve göreceli konumların nasıl davrandığını görebilirsiniz:

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>

Snippet'i genişlet

— Alireza
kaynak

4

Mutlak konumlandırma, ekranın ortak yönergelerine dayanır:

position:absolute;
top:0px;
left:0px;

^ öğeyi pencerenin sol üstüne yerleştirir.

Göreli konum, öğenin yerleştirildiği yere göre değişir:

position:relative;
top:1px;
left:1px;

^ öğeyi 1 piksel aşağıya ve orijinal oturduğu yerin solundan 1 piksel uzağa yerleştirir :)

— Damien-Wright
kaynak

3

Bağıl:

İle bir öğe position: relative;, normal konumuna göre konumlandırılır.
Göreli bir öğeye hiçbir konumlandırma özelliği (üst, sol, alt veya sağ) eklemezseniz, konumlandırması üzerinde hiçbir etkisi olmayacaktır. Tam olarak bir position: staticelement gibi davranacaktır .
Ancak başka bir konumlandırma özelliği eklerseniz, örneğin top: 10px; konumunu normalde olacağı yerden 10 piksel aşağı kaydırır.
Bu tür konumlandırmaya sahip bir öğe, diğer öğelerden etkilenir ve kendisi de başkalarını etkiler.

Mutlak:

Bir öğe, position: absolute;herhangi bir öğeyi tam olmasını istediğiniz yere yerleştirmenize olanak tanır. Üst, sol, alt konumlandırma niteliklerini kullanırsınız. ve konumu ayarlama hakkı.
En yakın statik olmayan ataya göre yerleştirilir. Böyle bir kap yoksa, sayfanın kendisine göre yerleştirilir.
Sayfadaki normal öğe akışından çıkarılır.
Bu tip konumlandırmaya sahip bir eleman diğer elemanlardan etkilenmez ve ayrıca diğer elemanların akışını da etkilemez.

Daha iyi netlik için bu kendini açıklayıcı örneğe bakın. https://codepen.io/nyctophiliac/pen/BJMqjX

— Pransh Tiwari
kaynak

0

Mutlak, nesneyi (div, span, vb.) Mutlak zorunlu bir konuma (genellikle piksel cinsinden belirlenir) yerleştirir ve göreli, nesneyi normalde bulunduğu yerden belirli bir miktar uzağa yerleştirir. Örneğin:

konum: göreceli; sol: -20px;

Ekranın sol kenarına 20 piksel yakınındaysa metnin sol tarafı kaybolabilir.

— Charles Zink
kaynak

0

position: absolute 0,0 gibi herhangi bir yere yerleştirilebilir ve orada kalabilir.

position: relative tarayıcıya başlangıçta yerleştirildiği konumdan uzak olacak şekilde yerleştirilir.

— Vil Ignoble
kaynak

0

konum: göreceli bir üst öğe olarak hareket eder konum: mutlak göreceli konumun alt öğesi olarak hareket eder. aşağıdaki örneği görebilirsiniz

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

— Imran Khan
kaynak