Ebeveynin mutlak konumlandırma yoksayılıyor

173

Mutlak konumlandırılmış bir öğeyi ebeveyninin dolgusuna nasıl çevirirsiniz? Bir iç divin ebeveyninin genişliği boyunca uzanmasını ve o ebeveynin altına, temel olarak bir altbilgiye yerleştirilmesini istiyorum. Ama çocuk ebeveynin dolgusunu onurlandırmak zorunda ve bunu yapmıyor. Çocuk ebeveynin kenarına doğru bastırılır.

Yani bunu istiyorum:

resim açıklamasını buraya girin

ama bunu alıyorum:

resim açıklamasını buraya girin

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

İç divın etrafında bir kenar boşluğu ile bunu yapabilirim, ancak bunu eklememeyi tercih ederim.

css padding css-position

— D512
kaynak

5

İç div'in sol / sağ / altını neden değiştirmiyorsunuz style="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"?

— j08691

12

Evet bunu düşündüm ama çabuk bir bakım baş ağrısı haline geliyor çünkü her çocuğun bunu hesaba katmak için kendi ofsetleri olması gerekiyor. Ebeveynin dolgusunu onurlandırırlarsa, ebeveynte bir kez ayarlayabilir ve tüm çocuklar için endişelenmeyebilirsiniz.

— d512

Eğer olarak (nispi bir konuma) ebeveynin dolgu değerini kullanırsanız, yukarıda işaret edildiği gibi left:ve right:(mutlak konuma) çocuğa, sorun çözüldü. Ben bu b / c aynı soruna sahip başkalarının arıyor olabilir cevap ekliyorum.

— rda3000

Burada benzer bir sorun var: jsfiddle.net/5n4By/6 . Altbilgi, üst öğesinin sol dolgusunu onurlandırıyor, ancak sağdan taşıyor. Tutarlı kalmak için doğru dolguyu da onurlandırmayı beklersiniz ...

— rafiki_rafi

186

İlk olarak, bunun neden olduğunu görelim .

Bunun nedeni, şaşırtıcı bir şekilde, bir kutunun position: absoluteiçerdiği kutu olduğunda, ebeveynin dolgu kutusu (yani, dolgusunun etrafındaki kutu) olmasıdır. Bu şaşırtıcıdır, çünkü genellikle (statik veya bağıl konumlandırma kullanılırken) içeren kutu ebeveynin içerik kutusudur.

İşte CSS spesifikasyonunun ilgili kısmı :

Ata'nın bir satır içi eleman olması durumunda, içeren blok, o eleman için üretilen ilk ve son satır içi kutuların dolgu kutularının etrafındaki sınırlayıcı kutudır .... Aksi takdirde, muhafaza bloğu, dolgu kenarı tarafından oluşturulur. ata.

En basit yaklaşım –Kış'ın cevabında önerildiği gibi- padding: inheritkesinlikle konumlandırılmış olarak kullanmaktır div. Ancak, kesinlikle konumlandırılan divkendi ek dolgularına sahip olmak istemiyorsanız çalışır . Bence en genel amaçlı çözümler (her iki elemanın da kendi bağımsız dolgularına sahip olabilmesi):

divKesinlikle konumlandırılmışın etrafına nispeten fazla konumlandırılmış (dolgu olmadan) ekstra ekleyin div. Bu yeni div, ebeveyninin dolgusuna saygı gösterecek ve divdaha sonra kesinlikle konumlandırılmış olan onu dolduracaktır.

Dezavantajı, elbette, sadece sunum amacıyla HTML ile uğraşmanızdır.
Dolguyu kesinlikle yerleştirilmiş elemanda tekrarlayın (veya ekleyin).

Buradaki dezavantaj, CSS'nizdeki değerleri tekrarlamanız gerektiğidir, bu da CSS'yi doğrudan yazıyorsanız kırılgandır. Ancak, gibi bir ön işleme aracı kullanıyorsanız SASSveya LESSbir değişken kullanarak bu sorunu önleyebilirsiniz. Şahsen kullandığım yöntem bu.

— Kevin Christopher Henry
kaynak

Bu neden varsayılan position: absolute? İçeren kutu dolgu kutusu olduğu şaşırtıcıdır, ama emin (olmadan bir sebebi var am tıpkı bunun bir nedeni orada olmalı box-sizing) widthve heightpadding ya da border içermez.

— trysis

1

Sadece bir ek: bunların hiçbiri box-sizingebeveyn veya çocuk üzerindeki mülkten etkilenmez . Bunun nedeni, genişliği / yüksekliği olduğu gibi boyutlandırmayı etkilediği , ancak içeren kutuyu etkilememesidir , ancak her ikisini de etkilerse daha anlamlı olacağını itiraf etmeliyim.

— trysis

2

Bu iyi bir bilgi ama YANLIŞ cevap. Doğru cevap Winter'ın altındadır .... dolgu kullanın: devralın ve Mutlak elementiniz ihtiyaç duyduğu dolguya kavuşacaktır. Bunun neden doğru cevaptan daha fazla oy verdiğini bilmiyorum ...: P

— NotaGuruAtTüm

1

@NotaGuruAtAll: padding: inheritEğer kesinlikle konumlandırılan divkendi yastığına ihtiyaç duymuyorsa iyi çalışır ve bu teknikten bahsetmiştim. Yine de daha az esnektir, çünkü kesinlikle konumlandırılmış herhangi bir ek dolgu ekleyemezsiniz div(yani söyleyemezsiniz padding: inherit + 5px). Bu yüzden burada bahsettiğim teknikleri tercih ediyorum.

— Kevin Christopher Henry

1

position:absoluteÇocuğun ebeveynin dolgusuna saygı göstermesini arıyorsanız , alt öğe üzerindeki dolgu devralma gerçekten işe yarar. Ancak, çocuğa ek dolgu eklemek istiyorsanız, dolgu oranını kodunuzda kontrol altında tutmanız gerekir. Sadece CSS ile yapmanın temiz bir yolu yok.

— Dylan Pierce

51

Deneyebileceğiniz bir şey şu css kullanmaktır:

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

Alt öğenin dolguyu üst öğeden devralmasını sağlar, daha sonra alt öğenin ebeveyn genişliği ve dolgusuyla eşleşecek şekilde konumlandırılabilir.

Ayrıca, box-sizing: border-box;ilgili öğeler için kullanıyorum .

Bunu tüm tarayıcılarda test etmedim, ancak Chrome, Firefox ve IE10'da çalışıyor gibi görünüyor.

— Kış
kaynak

Bu cevabı ve @NewSpender'ın cevabını birleştirdim. Benim özel durumda, mutlak konumlandırılmış div dolgu gözardı etti ama oldu ebeveyninin sınırlanmış. Bu yüzden beyaz kalın kenarlıklarla mutlak konumlandırılmış div vermek ihtiyacım olan dolguyu taklit etti. Ancak ön koşul, arka planınızın aynı renkte olması gerektiğidir.

— Ogier Schelvis

Ancak OP çocuğun ebeveynin dolgusunu miras almasını istemez. Çocuğun ebeveynin dolgusuna göre dengelenmesini istiyor.

— Michael Gummelt

30

Eh, bu en şık çözüm olmayabilir (anlamsal olarak), ancak bazı durumlarda herhangi bir dezavantaj olmadan çalışacaktır: Dolgu yerine, ana eleman üzerinde şeffaf bir kenarlık kullanın. Mutlak konumlandırılmış alt öğeler kenarlığı onurlandırır ve tam olarak aynı hale getirilir (stil için ana öğenin kenarlığını kullanmanız dışında).

— NewSpender
kaynak

8

Üst div'de dolgu yerine kenar boşluğu kullanın: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

— Niloct
kaynak

Arka planın (renk) dolgu gibi kenar boşluklarına uygulanmadığını unutmayın

— Paul

6

İşte benim en iyi çekimim. Başka bir Div ekledim ve kırmızı yaptım ve sadece test etmek için ebeveyninizin yüksekliğini 200 piksel olarak değiştirdim. Fikir şu ki, çocuk şimdi torun olur ve ebeveyn büyükbaba veya büyükanne olur. Böylece ebeveyn, ebeveynine saygı duyar. Umarım fikrimi alırsın.

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">    
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

Düzenle:

Bence yapmaya çalıştığınız şey yapılamaz. Mutlak konum, ona onur vermesi gereken koordinatları vereceğiniz anlamına gelir. Ebeveynin 5px'lik bir dolgusu varsa ne olur. Ve kesinlikle çocuğu en tepeye yerleştirirsiniz: -5px; sol: -5 piksel . Aynı anda hem ebeveyni hem de sizi onurlandırmak nasıl olur?

Çözümüm

Eğer ebeveyni onurlandırmak istiyorsanız, kesinlikle onu konumlandırmayın.

— Dokunma
kaynak

Teşekkürler, gönderiyi takdir ediyorum, ancak gerçek sorun için hala bir çözüm var. Gerçekten bilmek istediğim, çocuklara ebeveyn elemanın dolgusunu onurlandırabilirseniz. Eğer cevap hayır ise, size temsilciyi vereceğim.

— d512

Onları kesinlikle konumlandırırsanız, ana öğelerini onurlandırmazlar. Seni onurlandıracaklar. Aynı nedenden dolayı, onları kesinlikle konumlandırmazsanız, alt öğe gibi öğeleri gerçekten kullanamazsınız : 10px çünkü ana öğelerini onurlandırırlar. Ama yapmak istediğiniz şey, sanırım bir çelişki için yer açacak ve bu nedenle tarayıcılarda farklı olacak. Bence sadece etrafta bir çalışma olacak.

— Dokunmatik

3

Mutlak konumlandırma ebeveyni onurlandırır, kullandığı koordinat sistemi budur. Top 0px dediğinizde, üst öğenin üst kısmından 0px uzakta demektir. Soru, ebeveynlerin doldurmasını dikkate alıp almayacağıdır. Ebeveynin 5px'lik bir dolgusu varsa ve çocuğa üst verdiyseniz: -5px, ebeveynin dolgusu onurlandırıldıysa ebeveyn ile aynı hizada veya eğer değilse ebeveynin 5px'in üzerinde durur.

— d512

3

1.) ebeveyn üzerinde büyük kenarlık kullanamazsınız - belirli bir kenarlığa sahip olmak istiyorsanız

2.) kenar boşluğu ekleyemezsiniz - ebeveyninizin başka bir kabın parçası olması ve ebeveyninizin tam olarak almasını istiyorsanız büyük ebeveynin genişliği.

Uygulanması gereken tek çözüm, ebeveynlerinizin büyükbaba veya büyükanne olmaları için çocuklarınızı başka bir kaba sarmak ve daha sonra yeni çocuk Sarıcı / Ebeveynlerine dolgu uygulamaktır. Ya da çocuklara doğrudan dolgu uygulayabilirsiniz.

Senin durumunda:

.css-sux{
  padding: 0px 10px 10px 10px;
}

— bhavya_w
kaynak

1

Ekstra bir Div kullanarak kolayca yapmış olabilir.

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

Demo: https://jsfiddle.net/soxv3vr0/

— asankasri
kaynak

0

dolgu ekleyin : mutlak pozisyonunuza miras alın

.box{
  background: red;
  position: relative;
  padding: 30px;
  width:500px;
  height:200px;
 box-sizing: border-box;
 

}

<div  class="box">

  <div style="position: absolute;left:0;top:0;padding: inherit">top left</div>
  <div style="position: absolute;right:0;top:0;padding: inherit">top right</div>
  <div style="text-align: center;padding: inherit">center</div>
  <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>
  <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>


</div>

Snippet'i genişlet

— ßãlãjî
kaynak