Мені потрібна допомога з накладанням однієї особи divна іншу div.
Мій код виглядає приблизно так:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
На жаль, я не можу вкласти гніздо div#infoiчи imgвсередині першого div.navi.
Це повинно бути два окремих divs , як показано на малюнку, але мені потрібно знати , як я міг би помістити div#infoiнад div.naviі правої здебільшого і по центру у верхній частині div.navi.
Відповіді:
#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елементами і дочірніми елементами position: absolute.
absoluteелементи, розташовані відповідно до їх найближчого явно розташованого ( position:absolute|relative|fixed) батьківського елемента. просто додаткові роз'яснення ... jsfiddle.net/p5jkc8gz
Прийняте рішення працює чудово, але IMO бракує пояснень, чому воно працює. Наведений нижче приклад зведений до основ і відокремлює важливий CSS від невідповідного стилю CSS. Як бонус я також включив детальне пояснення того, як працює позиціонування CSS.
TLDR; якщо ви хочете лише код, прокрутіть униз до Результат .
Є два окремих, брат, елементи і мета полягає в тому, щоб помістити другий елемент (з idз infoi), так що з'являється в межах попереднього елемента (один з classз navi). Структуру HTML неможливо змінити.
Щоб досягти бажаного результату, ми збираємося рухатись або розміщувати другий елемент, який ми будемо називати, #infoiщоб він з'явився в межах першого елемента, який ми будемо називати .navi. Зокрема, ми хочемо #infoiрозмістити його у правому верхньому куті .navi.
CSS має кілька властивостей для позиціонування елементів. За замовчуванням усі елементи є position: static. Це означає, що елемент буде розміщений відповідно до його порядку в структурі HTML, за невеликими винятками.
Решта positionзначення relative, absolute, stickyі fixed. Встановивши елемент positionна одне з цих інших значень, тепер можна використовувати комбінацію наступних чотирьох властивостей для позиціонування елемента:
toprightbottomleftІншими словами, встановивши position: absolute, ми можемо додати top: 100pxелемент для розміщення 100 пікселів у верхній частині сторінки. І навпаки, якщо ми встановимо, bottom: 100pxелемент розміщувався б на 100 пікселів знизу сторінки.
Ось де багато новачків CSS загубляться -position: absoluteмає орієнтир. У наведеному вище прикладі орієнтиром єbodyелемент. position: absoluteізtop: 100pxзасобом елемент розташований на 100 пікселів у верхній частиніbodyелемента.
Опорний кадр позиції або контекст позиції можна змінити, встановивши positionбатьківський елемент на будь-яке значення, відмінне відposition: static . Тобто ми можемо створити новий контекст позиції, надавши батьківський елемент:
position: relative;position: absolute;position: sticky;position: fixed;Наприклад, якщо <div class="parent">елемент заданий position: relative, будь-які дочірні елементи використовують <div class="parent">як свій позиційний контекст. Якби дочірній елемент був наданий position: absoluteі top: 100px, він би розміщувався на 100 пікселів у верхній частині <div class="parent">елемента, оскільки <div class="parent">це зараз контекст позиції.
Інший фактор, про який слід пам’ятати, - це порядок стеку - або те, як елементи розміщуються у напрямку z. Необхідно знати, що порядок складання елементів за замовчуванням визначається зворотним їх порядком у структурі HTML. Розглянемо наступний приклад:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
У цьому прикладі, якби два <div>елементи були розміщені в одному місці на сторінці, <div>Top</div>елемент охоплював би <div>Bottom</div>елемент. Оскільки <div>Top</div>з'являється після <div>Bottom</div>в структурі HTML, він має вищий порядок укладання.
Порядок укладання можна змінити за допомогою CSS за допомогою властивостей z-indexабо order.
У цьому питанні ми можемо ігнорувати порядок укладання, оскільки природна структура елементів елементів означає, що елемент, на якому ми хочемо з'явитися, topз’являється після іншого елемента
Отже, повернемося до проблеми, яка існує, - ми будемо використовувати контекст позиції для вирішення цього питання.
Як було сказано вище, наша мета - розташувати #infoiелемент так, щоб він виявився всередині .naviелемента. Для цього ми обернемо .naviі #infoiелементи в новий елемент, <div class="wrapper">щоб ми могли створити новий контекст позиції.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
Потім створіть новий контекст позиції, давши .wrappera position: relative.
.wrapper {
position: relative;
}
З цим новим контекстом позиції ми можемо позиціонувати #infoiвсередині .wrapper. По- перше, дати , що дозволяє нам позиціонувати абсолютно .#infoiposition: absolute#infoi.wrapper
Потім додайте top: 0та right: 0розташуйте #infoiелемент у правому верхньому куті. Пам'ятайте, оскільки #infoiелемент використовується .wrapperяк контекст його позиції, він буде знаходитися в правому верхньому куті .wrapperелемента.
#infoi {
position: absolute;
top: 0;
right: 0;
}
Оскільки .wrapperлише контейнер для .navi, розміщення #infoiу правому верхньому куті .wrapperдає ефект розташування у правому верхньому куті .navi.
І ось у нас це, #infoiсхоже, знаходиться у правому верхньому куті .navi.
Наведений нижче приклад зведений до основ та містить мінімальний стиль.
Ось альтернативне рішення за допомогою CSS Grid для позиціонування .naviелемента з #infoiелементом в правій крайній частині. Я використовував багатослівні gridвластивості, щоб зробити це максимально зрозумілим.
Якщо ми не можемо редагувати жоден HTML, тобто ми не можемо додати елемент обгортки, ми все одно можемо досягти бажаного ефекту.
Замість того , щоб використовувати position: absoluteна #infoiелементі, ми будемо використовувати position: relative. Це дозволяє нам переставити #infoiелемент з його за замовчуванням положення під .naviелементом. З position: relativeми можемо використовувати негативне topзначення , щоб перемістити його зі своєї позиції по замовчуванням, і leftзначення 100%мінус декількох пікселів, використовуючи left: calc(100% - 52px), щоб розташувати його поруч з правого боку.
За допомогою divзі стилем z-index:1;і position: absolute;ви можете накладаються на divбудь-якою іншою div.
z-indexвизначає порядок, в якому divs 'стека'. Див з вищим z-indexз’явиться перед дівом з нижчим z-index. Зауважте, що ця властивість працює лише з розташованими елементами .
Нова специфікація Grid CSS забезпечує набагато більш елегантне рішення. Використання position: absoluteможе призвести до перекриттів або проблем зі масштабуванням, тоді як Grid позбавить вас від брудних CSS-хаків.
Найбільш мінімальний приклад накладання сітки:
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;
}Це воно. Якщо ви не будуєте для Internet Explorer, ваш код, швидше за все, спрацює.
Тут випливає просте рішення на 100% на основі CSS. "Секрет" полягає у використанні display: inline-blockелемента в обгортці. Зображення vertical-align: bottomв зображенні - це хак для подолання 4px прокладки, яку додають деякі браузери після елемента.
Порада : якщо елемент перед обгорткою буде вбудований, він може закінчитися вкладеним. У цьому випадку ви можете «загорнути обгортку» всередину ємності display: block- зазвичай це добре і старе 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>Це те, що вам потрібно:
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, але все ще використовую вашу ідею у своїх веб-дизайнах. Я також спробував різні резолюції:
#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>Звичайно, навколо обох буде обгортка. Ви можете керувати розташуванням меню div, яке відображатиметься у заголовку div із лівими полями та верхніми позиціями. Ви також можете встановити меню div, щоб правильно плавати, якщо хочете.
Ось простий приклад наведення ефекту накладання з піктограмою завантаження над іншим ділом.
<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>Спробуйте тут: http://jsbin.com/fotozolucu/edit?html,css,output
overflow: hidden, використовуйтеoverflow: visibleзамість цього.