Bir bireyi divbaşka bir bireyin üzerine yerleştirmek için yardıma ihtiyacım var div.
Kodum şöyle görünüyor:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
Maalesef ilkinin içine div#infoiya da yuvasını yerleştiremiyorum .imgdiv.navi
İki ayrı olmak zorunda divgösterildiği gibi ler, ama ben yerleştirmek nasıl bilmek gerekir div#infoiaşkın div.navive sağ çoğu tarafına ve ortalanmış üstünde div.navi.
Yanıtlar:
#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>position: relativeÖğeleri ve alt öğeleri öğrenmeyi öneririm position: absolute.
absolutekonumlandırılmış elemanlar, en yakın açıkça konumlandırılmış ( position:absolute|relative|fixed) ana elemanlarına göre konumlandırılır . daha fazla açıklama ... jsfiddle.net/p5jkc8gz
Kabul edilen çözüm harika çalışıyor, ancak IMO'nun neden çalıştığına dair bir açıklama yok. Aşağıdaki örnek, temel bilgilerle kaynatılmıştır ve önemli CSS'yi ilgili olmayan stil CSS'sinden ayırır. Bir bonus olarak, CSS konumlandırmasının nasıl çalıştığına dair ayrıntılı bir açıklama da ekledim.
TLDR; yalnızca kodu istiyorsanız, aşağıya kaydırın Sonuç .
İki ayrı, kardeş, elemanlardır ve hedef (bir ikinci eleman konumlandırmaktır idarasında infoiönceki eleman (bir kez görünecek şekilde,) classarasında navi). HTML yapısı değiştirilemez.
İstenen sonucu elde etmek için arayacağımız ikinci elemanı taşıyacağız ya da konumlandıracağız, #infoiböylece arayacağımız ilk elemanın içinde görünecektir .navi. Özellikle, öğesinin #infoisağ üst köşesine yerleştirilmek istiyoruz .navi.
CSS'nin konumlandırma elemanları için çeşitli özellikleri vardır. Varsayılan olarak, tüm öğeler position: static. Bu, öğenin birkaç istisna dışında, HTML yapısındaki sırasına göre konumlandırılacağı anlamına gelir.
Diğer positiondeğerlerdir relative, absolute, sticky, ve fixed. Bir öğeyi positionbu diğer değerlerden birine ayarlayarak, öğeyi konumlandırmak için aşağıdaki dört özelliğin bir kombinasyonunu kullanmak artık mümkün:
toprightbottomleftBaşka bir deyişle, ayarlayarak position: absolute, top: 100pxöğeyi sayfanın üstünden 100 piksel konumlandırmayı ekleyebiliriz . Tersine, bottom: 100pxöğeyi ayarlarsak sayfanın altından 100 piksel konumlandırılır.
Burada birçok CSS yeni gelen kayboluyor -position: absolutebir referans çerçevesi var. Yukarıdaki örnekte, referans çerçevesibodyöğedir. position: absoluteiletop: 100pxaracılığıyla elemanı üstünden 100 piksel konumlandırılmışbodyelemanı.
Referansın pozisyon çerçevesi veya pozisyon bağlamı, positionbir ana elemanın dışında herhangi bir değereposition: static ayarlanmasıyla değiştirilebilir . Yani, bir üst öğe vererek yeni bir konum bağlamı oluşturabiliriz:
position: relative;position: absolute;position: sticky;position: fixed;Örneğin, bir <div class="parent">öğe verilirse position: relative, herhangi bir alt öğe <div class="parent">konum bağlamı olarak kullanır . Bir alt öğe verildiyse position: absoluteve top: 100pxöğe şu anda konum bağlamı <div class="parent">olduğundan, öğenin üstünden 100 piksel <div class="parent">konumlandırılırsa.
Dikkat edilmesi gereken diğer bir faktör , yığın sırası veya elemanların z yönünde istiflenmesidir. Burada bilinmesi gereken, öğelerin yığın sırasının varsayılan olarak HTML yapısındaki sıralarının tersi ile tanımlanmış olmasıdır. Aşağıdaki örneği düşünün:
<body>
<div>Bottom</div>
<div>Top</div>
</body>Bu örnekte, iki <div>öğe sayfada aynı yere yerleştirildiyse, <div>Top</div>öğe öğeyi kaplar <div>Bottom</div>. Yana <div>Top</div>sonra gelen <div>Bottom</div>HTML yapısında daha yüksek istifleme düzeni vardır.
Yığınlama sırası z-indexveya orderözellikleri kullanılarak CSS ile değiştirilebilir .
Öğelerin doğal HTML yapısı üzerinde görünmesini istediğimiz topöğenin diğer öğeden sonra gelmesi anlamına geldiğinden, bu sayıdaki yığınlama sırasını göz ardı edebiliriz .
Dolayısıyla, eldeki soruna geri dönersek - bu sorunu çözmek için konum bağlamını kullanacağız.
Yukarıda belirtildiği gibi, hedefimiz #infoiöğeyi öğenin içinde görünecek şekilde konumlandırmaktır .navi. Bunu yapmak için, yeni bir konum bağlamı oluşturabilmemiz için .navive #infoiöğelerini yeni bir öğeye <div class="wrapper">sararız.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>Ardından, .wrappera position: relative.
.wrapper {
position: relative;
}Bu yeni pozisyon bağlamıyla, #infoiiçeride konumlandırabiliriz .wrapper. İlk olarak, vermek #infoibir position: absolutepozisyona bizi izin #infoikesinlikle .wrapper.
Sonra eklemek top: 0ve right: 0konumlandırmak için #infoisağ üst köşede elemanı. Unutmayın, #infoiöğe .wrapperkonum bağlamı olarak kullandığından öğenin sağ üst köşesinde olacaktır .wrapper.
#infoi {
position: absolute;
top: 0;
right: 0;
}Çünkü .wrappersadece bir kap olduğu için .navi, #infoisağ üst köşesinde .wrapperkonumlandırma, sağ üst köşesinde konumlandırılma etkisi verir .navi.
Ve işte elimizde, #infoişimdi sağ üst köşede gibi görünüyor .navi.
Aşağıdaki örnek temel bilgilere göre kaynatılmıştır ve bazı minimal stiller içermektedir.
İşte konumlandırmak için CSS grid kullanımının alternatif çözüm .naviile eleman #infoisağında yer eleman. gridMümkün olduğunca net hale getirmek için ayrıntılı özellikleri kullandım .
Herhangi bir HTML'yi düzenleyemezsek, yani bir sarmalayıcı öğe ekleyemeyiz, yine de istenen efekti elde edebiliriz.
Bunun yerine kullanmanın position: absoluteüzerine #infoielemanı, biz kullanacağız position: relative. Bu, #infoiöğeyi öğenin altındaki varsayılan konumundan yeniden konumlandırmamızı sağlar .navi. İle , varsayılan konumundan yukarı taşımak için position: relativenegatif topbir leftdeğer ve sağ tarafa yakın konumlandırmak için 100%kullanarak eksi birkaç piksel değerini left: calc(100% - 52px)kullanabiliriz.
Bir divstil kullanarak z-index:1;ve başka herhangi bir position: absolute;bindirme yapabilirsiniz .divdiv
z-indexdiv 'yığınının' sırasını belirler. Daha yüksek z-indexolan bir div, daha düşük olan bir divın önünde görünür z-index. Bu özelliğin yalnızca konumlandırılmış öğelerle çalıştığını unutmayın .
Yeni Grid CSS özellikleri çok daha şık bir çözüm sunuyor. position: absoluteIzgara sizi kirli CSS saldırılarına karşı korurken kullanmak çakışmalara veya ölçeklendirme sorunlarına yol açabilir.
En az Grid Overlay örneği:
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;
}Bu kadar. Internet Explorer için oluşturmazsanız, kodunuz büyük olasılıkla çalışır.
İşte CSS tabanlı% 100 basit bir çözüm. "Gizli", display: inline-blocksarıcı öğede kullanmaktır. vertical-align: bottomGörüntüdeki bazı tarayıcılar öğeden sonra eklediğiniz 4 piksel dolguyu aşmak için kesmek.
Tavsiye : sargının önündeki eleman satır içi ise iç içe geçebilir. Bu durumda, bir ambalajın içine "ambalajı sarın" display: block- genellikle iyi ve eski 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>İhtiyacın olan şey bu:
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>CSS'de çok fazla kodlayıcı veya uzman değilim, ancak fikrinizi hala web tasarımlarımda kullanıyorum. Ben de farklı kararlar denedim:
#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>Tabii ki her ikisinin etrafında bir sargı olacak. Üstbilgi div'inde görüntülenecek menü divının konumunu sol kenar boşlukları ve üst konumlarla kontrol edebilirsiniz. İsterseniz div menüsünü sağa kaydırılacak şekilde de ayarlayabilirsiniz.
Aşağıda, başka bir div'a yükleme simgesi olan bir kaplama efekti getirmek için basit bir örnek verilmiştir.
<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>Burada deneyin: http://jsbin.com/fotozolucu/edit?html,css,output
overflow: hidden, kullanmakoverflow: visibleyerine.