Preciso de ajuda para sobrepor um indivíduo diva outro div.
Meu código fica assim:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>Infelizmente não consigo aninhar o div#infoiou o img, dentro do primeiro div.navi.
Tem que haver dois divs separados, como mostrado, mas preciso saber como colocar o lado div#infoisuperior div.navie o direito mais central e centralizado em cima do div.navi.
Respostas:
#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>Sugiro aprender sobre position: relativee elementos filho com position: absolute.
absoluteos elementos posicionados são posicionados em relação ao position:absolute|relative|fixedelemento pai explicitamente posicionado ( ) mais próximo . apenas esclarecimentos adicionais ... jsfiddle.net/p5jkc8gz
A solução aceita funciona muito bem, mas a IMO não tem uma explicação sobre o motivo. O exemplo abaixo é resumido ao básico e separa o CSS importante do CSS de estilo não relevante. Como bônus, também incluí uma explicação detalhada de como o posicionamento CSS funciona.
TLDR; se você deseja apenas o código, role para baixo até O resultado .
Existem dois elementos separados, irmãos, e o objetivo é posicionar o segundo elemento (com um idde infoi), para que ele apareça no elemento anterior (aquele com um classde navi). A estrutura HTML não pode ser alterada.
Para alcançar o resultado desejado, vamos mover ou posicionar o segundo elemento, que chamaremos #infoipara que apareça no primeiro elemento, que chamaremos .navi. Especificamente, queremos #infoiser posicionados no canto superior direito de .navi.
CSS possui várias propriedades para elementos de posicionamento. Por padrão, todos os elementos são position: static. Isso significa que o elemento será posicionado de acordo com sua ordem na estrutura HTML, com poucas exceções.
Os outros positionvalores são relative, absolute, sticky, e fixed. Ao definir um elemento positionpara um desses outros valores, agora é possível usar uma combinação das quatro propriedades a seguir para posicionar o elemento:
toprightbottomleftEm outras palavras, ao definir position: absolute, podemos adicionar top: 100pxpara posicionar o elemento 100 pixels da parte superior da página. Por outro lado, se definirmos bottom: 100pxo elemento, ele será posicionado a 100 pixels da parte inferior da página.
Aqui é onde muitos novatos em CSS se perdem -position: absolutetem um quadro de referência. No exemplo acima, o quadro de referência é obodyelemento position: absolutecomtop: 100pxsignifica que o elemento está posicionado a 100 pixels da parte superior dobodyelemento.
O quadro de referência da posição, ou o contexto da posição, pode ser alterado definindo o positionelemento pai de qualquer valor diferente deposition: static . Ou seja, podemos criar um novo contexto de posição fornecendo um elemento pai:
position: relative;position: absolute;position: sticky;position: fixed;Por exemplo, se um <div class="parent">elemento é fornecido position: relative, qualquer elemento filho usa o <div class="parent">como contexto de posição. Se um elemento filho fosse fornecido position: absolutee top: 100px, o elemento seria posicionado a 100 pixels da parte superior do <div class="parent">elemento, porque <div class="parent">agora é o contexto da posição.
O outro fator a ser observado é a ordem da pilha - ou como os elementos são empilhados na direção z. O que você deve saber aqui é que a ordem dos elementos da pilha é, por padrão, definida pelo inverso de sua ordem na estrutura HTML. Considere o seguinte exemplo:
<body>
<div>Bottom</div>
<div>Top</div>
</body>Neste exemplo, se os dois <div>elementos fossem posicionados no mesmo lugar na página, o <div>Top</div>elemento cobriria o <div>Bottom</div>elemento. Como <div>Top</div>vem depois <div>Bottom</div>na estrutura HTML, ele tem uma ordem de empilhamento mais alta.
A ordem de empilhamento pode ser alterada com CSS usando as propriedades z-indexou order.
Podemos ignorar a ordem de empilhamento nesta edição, pois a estrutura HTML natural dos elementos significa que o elemento em que queremos que apareça topvem após o outro elemento.
Então, voltando ao problema em questão - usaremos o contexto da posição para resolver esse problema.
Como mencionado acima, nosso objetivo é posicionar o #infoielemento para que ele apareça dentro do .navielemento. Para fazer isso, agruparemos os elementos .navie #infoiem um novo elemento <div class="wrapper">para que possamos criar um novo contexto de posição.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>Em seguida, crie um novo contexto de posição dando .wrappera position: relative.
.wrapper {
position: relative;
}Com este novo contexto de posição, podemos posicionar #infoidentro .wrapper. Primeiro, dê #infoia position: absolute, permitindo-nos posicionar #infoiabsolutamente .wrapper.
Em seguida, adicione top: 0e right: 0para posicionar o #infoielemento no canto superior direito. Lembre-se, como o #infoielemento está usando .wrappercomo contexto de posição, ele estará no canto superior direito do .wrapperelemento.
#infoi {
position: absolute;
top: 0;
right: 0;
}Como .wrapperé apenas um contêiner para .navi, o posicionamento #infoino canto superior direito da .wrapperdá o efeito de ser posicionado no canto superior direito da .navi.
E aí está, #infoiagora parece estar no canto superior direito de .navi.
O exemplo abaixo é resumido ao básico e contém alguns estilos mínimos.
Aqui está uma solução alternativa usando CSS Grid para posicionar o .navielemento com o #infoielemento na extrema direita. Eu usei as gridpropriedades detalhadas para deixar o mais claro possível.
Caso não possamos editar nenhum HTML, o que significa que não podemos adicionar um elemento wrapper, ainda podemos obter o efeito desejado.
Em vez de usar position: absoluteo #infoielemento, usaremos position: relative. Isso nos permite reposicionar o #infoielemento de sua posição padrão abaixo do .navielemento. Com position: relativepodemos usar um topvalor negativo para movê-lo para cima de sua posição padrão, e um leftvalor de 100%menos alguns pixels, usando left: calc(100% - 52px), para posicioná-lo próximo ao lado direito.
Usando um divcom estilo z-index:1;e position: absolute;você pode sobrepor seu divem qualquer outro div.
z-indexdetermina a ordem em que as divs 'empilham'. Um div com um valor mais alto z-indexaparecerá na frente de um div com um valor mais baixo z-index. Observe que essa propriedade funciona apenas com elementos posicionados .
A nova especificação Grid CSS fornece uma solução muito mais elegante. O uso position: absolutepode levar a sobreposições ou problemas de dimensionamento, enquanto o Grid o salvará de hacks CSS sujos.
Exemplo mínimo de sobreposição de grade:
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;
}É isso aí. Se você não criar para o Internet Explorer, seu código provavelmente funcionará.
A seguir, uma solução simples 100% baseada em CSS. O "segredo" é usar o display: inline-blockelemento no invólucro. A vertical-align: bottomimagem é um truque para superar o preenchimento de 4px que alguns navegadores adicionam após o elemento.
Conselho : se o elemento antes do wrapper estiver embutido, eles poderão acabar aninhados. Nesse caso, você pode "embrulhar o invólucro" dentro de um recipiente com display: block- geralmente um bom e velho 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>Isto é o que você precisa:
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>Não sou muito codificador nem especialista em CSS, mas ainda estou usando a sua ideia nos meus designs da web. Também tentei resoluções diferentes:
#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>Claro que haverá um invólucro em torno de ambos. Você pode controlar a localização do menu div que será exibido dentro do cabeçalho div com margens esquerdas e posições superiores. Você também pode definir o menu div para flutuar corretamente, se quiser.
Aqui está um exemplo simples para trazer um efeito de sobreposição com um ícone de carregamento sobre outra 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>Experimente aqui: http://jsbin.com/fotozolucu/edit?html,css,output
overflow: hidden, use emoverflow: visiblevez disso.