Cara overlay satu div di atas div lain

958

Saya perlu bantuan untuk menumpangkan satu orang divke orang laindiv .

Kode saya terlihat seperti ini:

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

Sayangnya saya tidak bisa bersarang div#infoiatau img, di dalam yang pertamadiv.navi .

Itu harus dua divs terpisah seperti yang ditunjukkan, tetapi saya perlu tahu bagaimana saya bisa menempatkan di div#infoiatas div.navidan ke sisi paling kanan dan berpusat di atas div.navi.

html css position overlay tonyf
sumber

Bukan kasus dalam pertanyaan ini tetapi jika Anda memiliki satu div di dalam div lain, div batin mungkin sepenuhnya atau sebagian karena overflow: hidden, gunakan overflow: visiblesebagai gantinya.

Christophe Roussy

1241

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

Luaskan cuplikan

Saya akan menyarankan belajar tentang position: relativedan elemen anak dengan position: absolute.

alex
sumber

3

terima kasih alex atas bantuan Anda tetapi apa yang saya temukan sekarang adalah bahwa ketika saya mengubah ukuran jendela saya dan menyeretnya menjadi lebih kecil, gambar info saya tidak bertahan dengan div induknya. Pada dasarnya ingin bergerak dengan div induk dan tetap cukup banyak pada posisi yang sama meskipun layar telah diubah ukurannya.

tonyf

2

@tonsils: Instruksi oleh alex harus memberi Anda hasil yang diinginkan, jadi pasti ada sesuatu yang menyebabkan masalah yang Anda uraikan. Bisakah Anda memberi kami contoh kode (HTML + CSS) sehingga kami dapat membantu Anda?

Erik Töyrä Silfverswärd

9

absoluteElemen yang diposisikan diposisikan relatif terhadap position:absolute|relative|fixedelemen induk terdekat yang diposisikan secara eksplisit ( ). hanya klarifikasi lebih lanjut ... jsfiddle.net/p5jkc8gz

xandercoded

Tergantung pada kasusnya, ini dapat disesuaikan. Dalam situasi saya, saya tidak perlu #navi untuk menjadi atas: 0 kiri: 0, dan sebagai kasus umum Jika Anda memiliki kode HTML, itu akan ditempatkan selama pohon HTML diuraikan. Jadi mungkin dalam hal ini definisi itu tidak perlu.

Fabricio PH

403

Solusi yang diterima bekerja dengan baik, tetapi IMO tidak memiliki penjelasan mengapa itu bekerja. Contoh di bawah ini diringkas menjadi dasar-dasar dan memisahkan CSS penting dari CSS styling yang tidak relevan. Sebagai bonus, saya juga menyertakan penjelasan terperinci tentang cara kerja pemosisian CSS.

TLDR; jika Anda hanya menginginkan kode, gulir ke bawah ke Hasil .

Masalah

Ada dua terpisah, saudara, unsur-unsur dan tujuannya adalah untuk posisi elemen kedua (dengan iddari infoi), agar muncul dalam elemen sebelumnya (yang dengan classdarinavi ). Struktur HTML tidak dapat diubah.

Solusi yang Diusulkan

Untuk mencapai hasil yang diinginkan, kita akan memindahkan, atau memposisikan, elemen kedua, yang akan kita panggil #infoisehingga muncul di dalam elemen pertama, yang akan kita panggil .navi. Secara khusus, kami ingin #infoidiposisikan di sudut kanan atas.navi .

Pengetahuan yang Diperlukan Posisi CSS

CSS memiliki beberapa properti untuk elemen penentuan posisi. Secara default, semua elemen adalah position: static. Ini berarti elemen akan diposisikan sesuai dengan urutannya dalam struktur HTML, dengan beberapa pengecualian.

Yang lain positionnilai-nilai relative, absolute, sticky, dan fixed. Dengan menyetel elemen positionke salah satu dari nilai-nilai lain ini sekarang mungkin untuk menggunakan kombinasi dari empat properti berikut untuk memposisikan elemen:

top
right
bottom
left

Dengan kata lain, dengan mengatur position: absolute, kita dapat menambahkan top: 100pxke posisi elemen 100 piksel dari bagian atas halaman. Sebaliknya, jika kita mengatur bottom: 100pxelemen akan diposisikan 100 piksel dari bagian bawah halaman.

Di sinilah banyak pendatang CSS tersesat -position: absolutememiliki kerangka referensi. Dalam contoh di atas, kerangka acuan adalahbodyelemen. position: absolutedengantop: 100pxcara elemen diposisikan 100 piksel dari bagian atasbodyelemen.

Kerangka posisi referensi, atau konteks posisi, dapat diubah dengan mengatur positionelemen induk ke nilai apa pun selainposition: static . Artinya, kita dapat membuat konteks posisi baru dengan memberikan elemen induk:

position: relative;
position: absolute;
position: sticky;
position: fixed;

Misalnya, jika <div class="parent">elemen diberikan position: relative, elemen anak mana pun menggunakan <div class="parent">konteks posisi mereka. Jika elemen anak diberikan position: absolutedan top: 100px, elemen akan diposisikan 100 piksel dari bagian atas <div class="parent">elemen, karena<div class="parent"> sekarang adalah konteks posisi.

Faktor lain yang harus diperhatikan adalah susunan tumpukan - atau bagaimana elemen ditumpuk dalam arah-z. Yang harus diketahui di sini adalah susunan elemen, secara default, ditentukan oleh kebalikan dari urutannya dalam struktur HTML. Perhatikan contoh berikut:

<body>
  <div>Bottom</div>
  <div>Top</div>
</body>

Dalam contoh ini, jika dua <div>elemen diposisikan di tempat yang sama pada halaman, <div>Top</div>elemen tersebut akan menutupi <div>Bottom</div>elemen tersebut. Sejak <div>Top</div>muncul setelah <div>Bottom</div>dalam struktur HTML memiliki urutan susun yang lebih tinggi.

Tampilkan cuplikan kode

div {
  position: absolute;
  width: 50%;
  height: 50%;
}

#bottom {
  top: 0;
  left: 0;
  background-color: blue;
}

#top {
  top: 25%;
  left: 25%;
  background-color: red;
}

<div id="bottom">Bottom</div>
<div id="top">Top</div>

Luaskan cuplikan

Urutan susun dapat diubah dengan CSS menggunakan properti z-indexatau order.

Kita dapat mengabaikan urutan penumpukan dalam masalah ini karena struktur HTML alami dari elemen berarti elemen yang ingin kita tampilkan topmuncul setelah elemen lainnya.

Jadi, kembali ke masalah yang ada - kita akan menggunakan konteks posisi untuk menyelesaikan masalah ini.

Solusinya

Seperti yang dinyatakan di atas, tujuan kami adalah memposisikan #infoielemen sehingga muncul di dalam .navielemen. Untuk melakukan ini, kami akan membungkus .navidan #infoielemen dalam elemen baru <div class="wrapper">sehingga kami dapat membuat konteks posisi baru.

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi"></div>
</div>

Kemudian buat konteks posisi baru dengan memberikan .wrappera position: relative.

.wrapper {
  position: relative;
}

Dengan konteks posisi baru ini, kita dapat memposisikan #infoidalam .wrapper. Pertama, beri #infoia position: absolute, yang memungkinkan kita untuk memposisikan secara #infoimutlak .wrapper.

Kemudian tambahkan top: 0dan right: 0posisikan #infoielemen di sudut kanan atas. Ingat, karena #infoielemen menggunakan .wrapperkonteks posisinya, elemen akan berada di kanan atas .wrapperelemen.

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

Karena .wrapperhanyalah wadah untuk .navi, memposisikan #infoidi sudut kanan atas .wrappermemberikan efek diposisikan di sudut kanan atas.navi .

Dan begitulah, #infoisekarang tampaknya berada di sudut kanan atas .navi.

Hasil

Contoh di bawah ini diringkas ke dasar-dasarnya, dan berisi beberapa gaya minimal.

Tampilkan cuplikan kode

/*
*  position: relative gives a new position context
*/
.wrapper {
  position: relative;
}

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: absolute;
  top: 0;
  right: 0;

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

Luaskan cuplikan

Solusi Alternatif (Kotak)

Inilah solusi alternatif menggunakan CSS Grid untuk memposisikan .navielemen dengan #infoielemen di paling kanan. Saya telah menggunakan gridproperti verbose untuk membuatnya sejelas mungkin.

Tampilkan cuplikan kode

:root {
  --columns: 12;
}

/*
*  Setup the wrapper as a Grid element, with 12 columns, 1 row
*/
.wrapper {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: 40px;
}

/*
*  Position the .navi element to span all columns
*/
.navi {
  grid-column-start: 1;
  grid-column-end: span var(--columns);
  grid-row-start: 1;
  grid-row-end: 2;
  
  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  background-color: #eaeaea;
}


/*
*  Position the #infoi element in the last column, and center it
*/
#infoi {
  grid-column-start: var(--columns);
  grid-column-end: span 1;
  grid-row-start: 1;
  place-self: center;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

Luaskan cuplikan

Solusi Alternatif (Tanpa Pembungkus)

Jika kami tidak dapat mengedit HTML apa pun, artinya kami tidak dapat menambahkan elemen pembungkus, kami masih dapat mencapai efek yang diinginkan.

Alih-alih menggunakan position: absolutepada #infoielemen, kita akan menggunakan position: relative. Ini memungkinkan kami untuk memposisikan ulang #infoielemen dari posisi default di bawah .navielemen. Dengan position: relativekita dapat menggunakan topnilai negatif untuk memindahkannya dari posisi default, dan leftnilai 100%minus beberapa piksel, menggunakan left: calc(100% - 52px), untuk memposisikannya di dekat sisi kanan.

Tampilkan cuplikan kode

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
  width: 100%;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: relative;
  display: inline-block;
  top: -40px;
  left: calc(100% - 52px);

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="navi"></div>
<div id="infoi">
  <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>

Luaskan cuplikan

Brett DeWoody
sumber

29

ini adalah entri IMO paling berguna karena menjelaskan mengapa ini bekerja!

Bret Weinraub

20

Ini mungkin penjelasan terbaik tentang bagaimana positioning bekerja yang saya lihat sejauh ini. Ringkas, tetapi cukup dalam untuk memperbaikinya.

Marcel

2

Ditto pada kualitas jawabannya. Penjelasan paling jelas yang pernah saya lihat.

Wade Hatler

2

Ini adalah jawaban yang bagus terutama untuk pendatang baru di css

Ali Ezzat Odeh

2

Kudos untuk penjelasannya

Joey587

111

Dengan menggunakan divgaya with z-index:1;dan position: absolute;Anda dapat overlay divpada yang lain div.

z-indexmenentukan urutan div mana 'stack'. Sebuah div dengan yang lebih tinggi z-indexakan muncul di depan div dengan yang lebih rendah z-index. Perhatikan bahwa properti ini hanya berfungsi dengan elemen yang diposisikan .

Hari Thakur
sumber

5

dapatkah Anda memberikan contoh?

Fabricio PH

3

Catatan tentang elemen yang diposisikan sangat penting.

Lawrence Dol

Jawaban ini sangat tidak lengkap sehingga perlu posting lengkap untuk menjelaskan alasannya. Cari konteks penumpukan.

Bojidar Stanchev

39

Spesifikasi Grid CSS baru memberikan solusi yang jauh lebih elegan. Penggunaan position: absolutedapat menyebabkan masalah tumpang tindih atau penskalaan sementara Grid akan menyelamatkan Anda dari peretasan CSS yang kotor.

Contoh Hamparan Kotak paling minimal:

HTML

<div class="container">
  <div class="content">This is the content</div>
  <div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>

CSS

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

Itu dia. Jika Anda tidak membuat untuk Internet Explorer, kode Anda kemungkinan besar akan berfungsi.

ja0nz
sumber

4

Ini harus menjadi jawaban teratas.

Inline

1

Jawaban superior. Jawaban yang dipilih harus dinilai kembali.

AbdulG

Solusi sempurna

Deniz da King

24

Berikut ini solusi sederhana 100% berdasarkan CSS. "Rahasia" adalah dengan menggunakan display: inline-blockelemen pembungkus. Gambar vertical-align: bottomdi dalam adalah hack untuk mengatasi padding 4px yang ditambahkan beberapa browser setelah elemen.

Saran : jika elemen sebelum pembungkus inline mereka dapat berakhir bersarang. Dalam hal ini Anda dapat "membungkus pembungkus" di dalam wadah dengan display: block- biasanya yang baik dan lama div.

.wrapper {
    display: inline-block;
    position: relative;
}

.hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 188, 212, 0);
    transition: background-color 0.5s;
}

.hover:hover {
    background-color: rgba(0, 188, 212, 0.8);
    // You can tweak with other background properties too (ie: background-image)...
}

img {
    vertical-align: bottom;
}

<div class="wrapper">
    <div class="hover"></div>
    <img src="http://placehold.it/450x250" />
</div>

Luaskan cuplikan

Tuco
sumber

20

Inilah yang Anda butuhkan:

function showFrontLayer() {
  document.getElementById('bg_mask').style.visibility='visible';
  document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}

#bg_mask {
  position: absolute;
  top: 0;
  right: 0;  bottom: 0;
  left: 0;
  margin: auto;
  margin-top: 0px;
  width: 981px;
  height: 610px;
  background : url("img_dot_white.jpg") center;
  z-index: 0;
  visibility: hidden;
} 

#frontlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 70px 140px 175px 140px;
  padding : 30px;
  width: 700px;
  height: 400px;
  background-color: orange;
  visibility: hidden;
  border: 1px solid black;
  z-index: 1;
} 


</style>

<html>
  <head>
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />

  </head>
  <body>
    <form action="test.html">
      <div id="baselayer">

        <input type="text" value="testing text"/>
        <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        <div id="bg_mask">
          <div id="frontlayer"><br/><br/>
            Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
            Use position: absolute to get the one div on top of another div.<br/><br/><br/>
            The bg_mask div is between baselayer and front layer.<br/><br/><br/>
            In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
            <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>

Luaskan cuplikan

DhavalThakor
sumber

9

Saya bukan seorang pembuat kode atau ahli dalam CSS, tetapi saya masih menggunakan ide Anda dalam desain web saya. Saya telah mencoba resolusi yang berbeda juga:

#wrapper {
  margin: 0 auto;
  width: 901px;
  height: 100%;
  background-color: #f7f7f7;
  background-image: url(images/wrapperback.gif);
  color: #000;
}
#header {
  float: left;
  width: 100.00%;
  height: 122px;
  background-color: #00314e;
  background-image: url(images/header.jpg);
  color: #fff;
}
#menu {
  float: left;
  padding-top: 20px;
  margin-left: 495px;
  width: 390px;
  color: #f1f1f1;
}

<div id="wrapper">
  <div id="header">
    <div id="menu">
      menu will go here
    </div>
  </div>
</div>

Luaskan cuplikan

Tentu saja akan ada pembungkus di sekitar keduanya. Anda dapat mengontrol lokasi div menu yang akan ditampilkan di dalam header header dengan margin kiri dan posisi teratas. Anda juga dapat mengatur menu div untuk mengapung tepat jika Anda mau.

Muhammad Ahsan
sumber

0

Berikut adalah contoh sederhana untuk membawa efek overlay dengan ikon memuat di atas div lain.

<style>
    #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
        background-size: 50px;
        z-index: 1;
        opacity: .6;
    }
    .wraper{
        position: relative;
        width:400px;  /* Just for testing, remove width and height if you have content inside this div */
        height:500px; /* Remove this if you have content inside */
    }
</style>

<h2>The overlay tester</h2>
<div class="wraper">
    <div id="overlay"></div>
    <h3>Apply the overlay over this div</h3>
</div>

Coba di sini: http://jsbin.com/fotozolucu/edit?html,css ,output

Nishad Up
sumber

Cara overlay satu div di atas div lain

Jawaban:

Masalah

Solusi yang Diusulkan

Pengetahuan yang Diperlukan Posisi CSS

Solusinya

Hasil

Solusi Alternatif (Kotak)

Solusi Alternatif (Tanpa Pembungkus)