Penentuan posisi absolut dengan mengabaikan bantalan orang tua

173

Bagaimana Anda membuat elemen diposisikan mutlak menghormati padding induknya? Saya ingin div bagian dalam merentangkan lebar induknya dan diletakkan di bagian bawah induknya, pada dasarnya footer. Tetapi anak harus menghormati bantalan orang tua dan itu tidak melakukan itu. Anak itu ditekan tepat ke tepi orangtua.

Jadi saya menginginkan ini:

masukkan deskripsi gambar di sini

tapi saya mendapatkan ini:

masukkan deskripsi gambar di sini

<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>

Saya dapat mewujudkannya dengan margin di sekitar div batin, tetapi saya lebih suka tidak harus menambahkan itu.

css padding css-position

— d512
sumber

5

Mengapa tidak mengubah bagian kiri / kanan / bawah div dalam style="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"?

— j08691

12

Ya saya memikirkan itu tetapi dengan cepat menjadi sakit kepala pemeliharaan karena setiap anak harus memiliki set offset sendiri untuk memperhitungkannya. Jika mereka hanya menghormati bantalan orang tua maka Anda bisa mengaturnya sekali di orang tua dan tidak khawatir tentang semua anak.

— d512

Seperti yang ditunjukkan di atas, jika Anda menggunakan nilai padding orang tua (posisi relatif) sebagai left:dan right:pada anak (posisi absolut), masalah Anda terpecahkan. Saya menambahkan ini b / c itu jawaban orang lain dengan masalah yang sama cenderung mencari.

— rda3000

Punya masalah serupa di sini: jsfiddle.net/5n4By/6 . Footer menghormati bantalan kiri orang tuanya, tetapi meluap di sebelah kanan. Anda akan mengharapkannya untuk menghormati bantalan yang tepat juga agar tetap konsisten ...

— rafiki_rafi

186

Pertama, mari kita lihat mengapa ini terjadi.

Alasannya adalah, secara mengejutkan, ketika sebuah kotak memiliki position: absolutekotak yang berisinya adalah kotak padding orang tua (yaitu, kotak di sekitar padding-nya). Hal ini mengejutkan karena biasanya (yaitu, bila menggunakan statis atau posisi relatif) kotak yang berisi adalah orangtua konten kotak.

Berikut adalah bagian yang relevan dari spesifikasi CSS :

Dalam hal leluhur adalah elemen inline, blok yang berisi adalah kotak pembatas di sekitar kotak padding dari kotak pertama dan kotak inline terakhir yang dihasilkan untuk elemen itu .... Jika tidak, blok yang mengandung dibentuk oleh tepi padding dari leluhur.

Pendekatan paling sederhana - seperti yang disarankan dalam jawaban Winter - adalah untuk digunakan padding: inheritpada posisi yang mutlak div. Ini hanya berfungsi, jika Anda tidak ingin yang benar-benar diposisikan divmemiliki bantalan tambahan sendiri. Saya pikir solusi tujuan umum (di mana kedua elemen dapat memiliki padding independen mereka sendiri) adalah:

Tambahkan posisi ekstra yang relatif div(tanpa bantalan) di sekitar posisi benar-benar div. Yang baru divakan menghormati bantalan induknya, dan yang diposisikan benar-benar divakan mengisinya.

Kelemahannya, tentu saja, adalah bahwa Anda mengacaukan HTML hanya untuk tujuan presentasi.
Ulangi bantalan (atau tambahkan ke dalamnya) pada elemen yang benar-benar diposisikan.

Kelemahannya di sini adalah Anda harus mengulangi nilai-nilai dalam CSS Anda, yang rapuh jika Anda menulis CSS secara langsung. Namun, jika Anda menggunakan alat pra-pemrosesan suka SASSatau LESSAnda dapat menghindari masalah itu dengan menggunakan variabel. Ini adalah metode yang saya gunakan secara pribadi.

— Kevin Christopher Henry
sumber

Mengapa ini standar untuk position: absolute? Mengejutkan bahwa kotak yang berisi adalah kotak bantalan, tetapi pasti ada alasan untuk itu, sama seperti saya yakin ada alasan mengapa (tanpa box-sizing) width& heighttidak termasuk padding atau perbatasan.

— trysis

1

Hanya tambahan: tidak ada yang terpengaruh oleh box-sizingproperti ini, pada orang tua atau anak. Ini karena itu mempengaruhi ukuran , seperti pada lebar / tinggi, tetapi bukan kotak yang berisi, meskipun saya akui itu akan lebih masuk akal jika itu mempengaruhi keduanya.

— trysis

2

Ini adalah informasi yang baik, tetapi itu adalah jawaban yang SALAH. Jawaban yang tepat adalah Winter di bawah ini .... gunakan padding: inherit dan elemen Absolute Anda akan mendapatkan padding yang dibutuhkan. Tidak tahu mengapa ini memiliki lebih banyak suara positif daripada jawaban yang tepat ...: P

— NotaGuruAtAll

1

@NotaGuruAtAll: padding: inheritberfungsi dengan baik jika benar-benar diposisikan divtidak perlu padding sendiri, dan saya telah menambahkan menyebutkan teknik itu. Ini kurang fleksibel, karena Anda tidak dapat menambahkan bantalan tambahan ke posisi yang benar-benar div(yaitu Anda tidak bisa mengatakan padding: inherit + 5px). Itu sebabnya saya lebih suka teknik yang saya sebutkan di sini.

— Kevin Christopher Henry

1

Padding inherit pada position:absoluteelemen anak memang bekerja jika Anda hanya mencari anak untuk menghormati padding orang tua. Namun, jika Anda ingin menambahkan padding tambahan pada anak Anda harus menjaga rasio paddings dalam memeriksa kode Anda. Tidak ada cara bersih untuk melakukannya hanya dengan CSS.

— Dylan Pierce

51

Satu hal yang bisa Anda coba adalah menggunakan css berikut:

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

Ini memungkinkan elemen anak mewarisi padding dari orang tua, maka anak dapat diposisikan untuk mencocokkan lebar dan padding orang tua.

Juga, saya menggunakan box-sizing: border-box;elemen yang terlibat.

Saya belum menguji ini di semua browser, tetapi tampaknya berfungsi di Chrome, Firefox dan IE10.

— Musim dingin
sumber

Saya menggabungkan jawaban ini dan jawaban @NewSpender. Dalam kasus tertentu saya, div diposisikan mutlak terus mengabaikan padding tapi itu dibatasi oleh elemen induknya. Jadi memberikan div posisi absolut dengan perbatasan putih tebal meniru bantalan yang saya butuhkan. Sebuah prasyarat adalah latar belakang Anda harus memiliki warna yang sama.

— Ogier Schelvis

Tetapi OP tidak ingin anak mewarisi lapisan induk. Dia ingin anak diimbangi sesuai dengan bantalan orang tua.

— Michael Gummelt

30

Yah, ini mungkin bukan solusi yang paling elegan (semantik), tetapi dalam beberapa kasus ini akan bekerja tanpa kekurangan: Alih-alih bantalan, gunakan perbatasan transparan pada elemen induk. Elemen anak diposisikan mutlak akan menghormati perbatasan dan itu akan diberikan persis sama (kecuali Anda menggunakan perbatasan elemen induk untuk styling).

— NewSpender
sumber

8

Gunakan margin alih-alih mengisi dalam div induk: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

— Niloct
sumber

Ketahuilah bahwa latar (warna) tidak diterapkan pada margin seperti pada padding

— Paul

6

Ini tembakan terbaik saya. Saya menambahkan Div lain dan membuatnya merah dan mengubah tinggi orangtua Anda menjadi 200px hanya untuk mengujinya. Idenya adalah anak sekarang menjadi cucu dan orang tua menjadi kakek-nenek. Jadi orang tua menghormati orang tuanya. Semoga Anda mendapatkan ide saya.

<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>

Edit:

Saya pikir apa yang Anda coba lakukan tidak dapat dilakukan. Posisi absolut berarti bahwa Anda akan memberikannya koordinasi yang harus dihormati. Bagaimana jika orang tua memiliki padding 5px. Dan Anda benar-benar memposisikan anak di atas: -5px; kiri: -5px . Bagaimana seharusnya menghormati orang tua dan Anda pada saat yang sama ??

Solusi saya

Jika Anda ingin itu menghormati orangtua, jangan benar-benar memposisikannya.

— Menyentuh
sumber

Terima kasih, saya menghargai posting ini, tetapi masih ada solusi untuk masalah sebenarnya. Yang benar-benar ingin saya ketahui adalah jika Anda dapat membuat anak-anak menghormati lapisan elemen orangtua. Jika ternyata jawabannya tidak, saya akan memberikan Anda perwakilan.

— d512

Jika Anda benar-benar memposisikan mereka, maka mereka tidak akan menghormati elemen induknya. Mereka akan menghormatimu. Untuk alasan yang sama, jika Anda tidak benar-benar memposisikannya, maka Anda tidak dapat menggunakan hal-hal seperti bottom: 10px karena mereka menghormati elemen induknya. Tapi apa yang ingin Anda lakukan, saya kira akan memberikan ruang untuk kontradiksi dan karenanya, akan berbeda di browser. Saya pikir hanya pekerjaan di sekitar yang akan dilakukan.

— Sentuh

3

Penentuan posisi absolut memang menghormati orangtua, itulah sistem koordinat yang digunakannya. Ketika Anda mengatakan 0px atas, itu berarti 0px jauh dari atas orangtua. Pertanyaannya adalah apakah harus mempertimbangkan orang tua. Jika orang tua memiliki bantalan 5px dan Anda memberikan anak atas: -5px, itu akan membuatnya rata dengan orang tua jika bantalan orang tua dihormati, atau 5px di atas orang tua jika tidak.

— d512

3

1.) Anda tidak dapat menggunakan batas besar pada orang tua - jika Anda ingin memiliki batas tertentu

2.) Anda tidak dapat menambahkan margin - jika orang tua Anda adalah bagian dari beberapa wadah lain dan Anda ingin orang tua Anda untuk mengambil penuh lebar grand parent itu.

Satu-satunya Solusi yang harus diterapkan adalah untuk membungkus anak-anak Anda di wadah lain sehingga orang tua Anda menjadi kakek-nenek dan kemudian menerapkan bantalan ke Pembungkus / Orangtua anak-anak baru. Atau Anda bisa langsung mengaplikasikan padding pada anak-anak.

Dalam kasus Anda:

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

— bhavya_w
sumber

1

Bisa dengan mudah dilakukan dengan menggunakan level ekstra Div.

<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
sumber

0

tambahkan padding: mewarisi di posisi absolut Anda

.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>

Luaskan cuplikan

— ßãlãjî
sumber