I need assistance with overlaying one individual div
over another individual div
.
My code looks like this:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
Unfortunately I cannot nest the div#infoi
or the img
, inside the first div.navi
.
It has to be two separate div
s as shown, but I need to know how I could place the div#infoi
over the div.navi
and to the right most side and centered on top of the div.navi
.
I am not much of a coder nor an expert in CSS, but I am still using your idea in my web designs. I have tried different resolutions too:
#wrapper {_x000D_
margin: 0 auto;_x000D_
width: 901px;_x000D_
height: 100%;_x000D_
background-color: #f7f7f7;_x000D_
background-image: url(images/wrapperback.gif);_x000D_
color: #000;_x000D_
}_x000D_
#header {_x000D_
float: left;_x000D_
width: 100.00%;_x000D_
height: 122px;_x000D_
background-color: #00314e;_x000D_
background-image: url(images/header.jpg);_x000D_
color: #fff;_x000D_
}_x000D_
#menu {_x000D_
float: left;_x000D_
padding-top: 20px;_x000D_
margin-left: 495px;_x000D_
width: 390px;_x000D_
color: #f1f1f1;_x000D_
}
_x000D_
<div id="wrapper">_x000D_
<div id="header">_x000D_
<div id="menu">_x000D_
menu will go here_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
Of course there will be a wrapper around both of them. You can control the location of the menu div which will be displayed within the header div with left margins and top positions. You can also set the div menu to float right if you like.
The accepted solution works great, but IMO lacks an explanation as to why it works. The example below is boiled down to the basics and separates the important CSS from the non-relevant styling CSS. As a bonus, I've also included a detailed explanation of how CSS positioning works.
TLDR; if you only want the code, scroll down to The Result.
There are two separate, sibling, elements and the goal is to position the second element (with an id
of infoi
), so it appears within the previous element (the one with a class
of navi
). The HTML structure cannot be changed.
To achieve the desired result we're going to move, or position, the second element, which we'll call #infoi
so it appears within the first element, which we'll call .navi
. Specifically, we want #infoi
to be positioned in the top-right corner of .navi
.
CSS has several properties for positioning elements. By default, all elements are position: static
. This means the element will be positioned according to its order in the HTML structure, with few exceptions.
The other position
values are relative
, absolute
, sticky
, and fixed
. By setting an element's position
to one of these other values it's now possible to use a combination of the following four properties to position the element:
top
right
bottom
left
In other words, by setting position: absolute
, we can add top: 100px
to position the element 100 pixels from the top of the page. Conversely, if we set bottom: 100px
the element would be positioned 100 pixels from the bottom of the page.
Here's where many CSS newcomers get lost - position: absolute
has a frame of reference. In the example above, the frame of reference is the body
element. position: absolute
with top: 100px
means the element is positioned 100 pixels from the top of the body
element.
The position frame of reference, or position context, can be altered by setting the position
of a parent element to any value other than position: static
. That is, we can create a new position context by giving a parent element:
position: relative;
position: absolute;
position: sticky;
position: fixed;
For example, if a <div class="parent">
element is given position: relative
, any child elements use the <div class="parent">
as their position context. If a child element were given position: absolute
and top: 100px
, the element would be positioned 100 pixels from the top of the <div class="parent">
element, because the <div class="parent">
is now the position context.
The other factor to be aware of is stack order - or how elements are stacked in the z-direction. The must-know here is the stack order of elements are, by default, defined by the reverse of their order in the HTML structure. Consider the following example:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
In this example, if the two <div>
elements were positioned in the same place on the page, the <div>Top</div>
element would cover the <div>Bottom</div>
element. Since <div>Top</div>
comes after <div>Bottom</div>
in the HTML structure it has a higher stacking order.
div {_x000D_
position: absolute;_x000D_
width: 50%;_x000D_
height: 50%;_x000D_
}_x000D_
_x000D_
#bottom {_x000D_
top: 0;_x000D_
left: 0;_x000D_
background-color: blue;_x000D_
}_x000D_
_x000D_
#top {_x000D_
top: 25%;_x000D_
left: 25%;_x000D_
background-color: red;_x000D_
}
_x000D_
<div id="bottom">Bottom</div>_x000D_
<div id="top">Top</div>
_x000D_
The stacking order can be changed with CSS using the z-index
or order
properties.
We can ignore the stacking order in this issue as the natural HTML structure of the elements means the element we want to appear on top
comes after the other element.
So, back to the problem at hand - we'll use position context to solve this issue.
As stated above, our goal is to position the #infoi
element so it appears within the .navi
element. To do this, we'll wrap the .navi
and #infoi
elements in a new element <div class="wrapper">
so we can create a new position context.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
Then create a new position context by giving .wrapper
a position: relative
.
.wrapper {
position: relative;
}
With this new position context, we can position #infoi
within .wrapper
. First, give #infoi
a position: absolute
, allowing us to position #infoi
absolutely in .wrapper
.
Then add top: 0
and right: 0
to position the #infoi
element in the top-right corner. Remember, because the #infoi
element is using .wrapper
as its position context, it will be in the top-right of the .wrapper
element.
#infoi {
position: absolute;
top: 0;
right: 0;
}
Because .wrapper
is merely a container for .navi
, positioning #infoi
in the top-right corner of .wrapper
gives the effect of being positioned in the top-right corner of .navi
.
And there we have it, #infoi
now appears to be in the top-right corner of .navi
.
The example below is boiled down to the basics, and contains some minimal styling.
/*_x000D_
* position: relative gives a new position context_x000D_
*/_x000D_
.wrapper {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
/*_x000D_
* The .navi properties are for styling only_x000D_
* These properties can be changed or removed_x000D_
*/_x000D_
.navi {_x000D_
background-color: #eaeaea;_x000D_
height: 40px;_x000D_
}_x000D_
_x000D_
_x000D_
/*_x000D_
* Position the #infoi element in the top-right_x000D_
* of the .wrapper element_x000D_
*/_x000D_
#infoi {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
right: 0;_x000D_
_x000D_
/*_x000D_
* Styling only, the below can be changed or removed_x000D_
* depending on your use case_x000D_
*/_x000D_
height: 20px;_x000D_
padding: 10px 10px;_x000D_
}
_x000D_
<div class="wrapper">_x000D_
<div class="navi"></div>_x000D_
<div id="infoi">_x000D_
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>_x000D_
</div>_x000D_
</div>
_x000D_
Here's an alternate solution using CSS Grid to position the .navi
element with the #infoi
element in the far right. I've used the verbose grid
properties to make it as clear as possible.
:root {_x000D_
--columns: 12;_x000D_
}_x000D_
_x000D_
/*_x000D_
* Setup the wrapper as a Grid element, with 12 columns, 1 row_x000D_
*/_x000D_
.wrapper {_x000D_
display: grid;_x000D_
grid-template-columns: repeat(var(--columns), 1fr);_x000D_
grid-template-rows: 40px;_x000D_
}_x000D_
_x000D_
/*_x000D_
* Position the .navi element to span all columns_x000D_
*/_x000D_
.navi {_x000D_
grid-column-start: 1;_x000D_
grid-column-end: span var(--columns);_x000D_
grid-row-start: 1;_x000D_
grid-row-end: 2;_x000D_
_x000D_
/*_x000D_
* Styling only, the below can be changed or removed_x000D_
* depending on your use case_x000D_
*/_x000D_
background-color: #eaeaea;_x000D_
}_x000D_
_x000D_
_x000D_
/*_x000D_
* Position the #infoi element in the last column, and center it_x000D_
*/_x000D_
#infoi {_x000D_
grid-column-start: var(--columns);_x000D_
grid-column-end: span 1;_x000D_
grid-row-start: 1;_x000D_
place-self: center;_x000D_
}
_x000D_
<div class="wrapper">_x000D_
<div class="navi"></div>_x000D_
<div id="infoi">_x000D_
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>_x000D_
</div>_x000D_
</div>
_x000D_
In the case we can't edit any HTML, meaning we can't add a wrapper element, we can still achieve the desired effect.
Instead of using position: absolute
on the #infoi
element, we'll use position: relative
. This allows us to reposition the #infoi
element from its default position below the .navi
element. With position: relative
we can use a negative top
value to move it up from its default position, and a left
value of 100%
minus a few pixels, using left: calc(100% - 52px)
, to position it near the right-side.
/*_x000D_
* The .navi properties are for styling only_x000D_
* These properties can be changed or removed_x000D_
*/_x000D_
.navi {_x000D_
background-color: #eaeaea;_x000D_
height: 40px;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
_x000D_
/*_x000D_
* Position the #infoi element in the top-right_x000D_
* of the .wrapper element_x000D_
*/_x000D_
#infoi {_x000D_
position: relative;_x000D_
display: inline-block;_x000D_
top: -40px;_x000D_
left: calc(100% - 52px);_x000D_
_x000D_
/*_x000D_
* Styling only, the below can be changed or removed_x000D_
* depending on your use case_x000D_
*/_x000D_
height: 20px;_x000D_
padding: 10px 10px;_x000D_
}
_x000D_
<div class="navi"></div>_x000D_
<div id="infoi">_x000D_
<img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>_x000D_
</div>
_x000D_
relative position
, inside this parent you can set the absolute position
of your divs<div> <------Relative
<div/> <------Absolute
<div/> <------Absolute
<div/> <------Absolute
<div/>
Final result:
https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100
<div class="container">
<div class="header">TOP: I am at Top & above of body container</div>
<div class="center">CENTER: I am at Top & in Center of body container</div>
<div class="footer">BOTTOM: I am at Bottom & above of body container</div>
</div>
Set HTML Body full width
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
After that, you can set a div with the relative position to take full width and height
.container {
position: relative;
background-color: blue;
height: 100%;
width: 100%;
border:1px solid;
color: white;
background-image: url("https://images.pexels.com/photos/5591663/pexels-photo-5591663.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-color: #cccccc;
}
Inside this div with the relative position you can put your div with absolute positions
On TOP above the container
.header {
position: absolute;
margin-top: -10px;
background-color: #d81b60 ;
left:0;
right:0;
margin:15px;
padding:10px;
font-size: large;
}
On BOTTOM above the container
.footer {
position: absolute;
background-color: #00bfa5;
left:0;
right:0;
bottom:0;
margin:15px;
padding:10px;
color: white;
font-size: large;
}
In CENTER above the container
.center {
position: absolute;
background-color: #00bfa5;
left: 30%;
right: 30%;
bottom:30%;
top: 30%;
margin:10px;
padding:10px;
color: white;
font-size: large;
}
Here is a simple example to bring an overlay effect with a loading icon over another 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>
Try it here: http://jsbin.com/fotozolucu/edit?html,css,output
This is what you need:
function showFrontLayer() {_x000D_
document.getElementById('bg_mask').style.visibility='visible';_x000D_
document.getElementById('frontlayer').style.visibility='visible';_x000D_
}_x000D_
function hideFrontLayer() {_x000D_
document.getElementById('bg_mask').style.visibility='hidden';_x000D_
document.getElementById('frontlayer').style.visibility='hidden';_x000D_
}
_x000D_
#bg_mask {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
right: 0; bottom: 0;_x000D_
left: 0;_x000D_
margin: auto;_x000D_
margin-top: 0px;_x000D_
width: 981px;_x000D_
height: 610px;_x000D_
background : url("img_dot_white.jpg") center;_x000D_
z-index: 0;_x000D_
visibility: hidden;_x000D_
} _x000D_
_x000D_
#frontlayer {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
right: 0;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
margin: 70px 140px 175px 140px;_x000D_
padding : 30px;_x000D_
width: 700px;_x000D_
height: 400px;_x000D_
background-color: orange;_x000D_
visibility: hidden;_x000D_
border: 1px solid black;_x000D_
z-index: 1;_x000D_
} _x000D_
_x000D_
_x000D_
</style>
_x000D_
<html>_x000D_
<head>_x000D_
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
<form action="test.html">_x000D_
<div id="baselayer">_x000D_
_x000D_
<input type="text" value="testing text"/>_x000D_
<input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>_x000D_
_x000D_
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_x000D_
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_x000D_
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_x000D_
<div id="bg_mask">_x000D_
<div id="frontlayer"><br/><br/>_x000D_
Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>_x000D_
Use position: absolute to get the one div on top of another div.<br/><br/><br/>_x000D_
The bg_mask div is between baselayer and front layer.<br/><br/><br/>_x000D_
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/>_x000D_
<input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</form>_x000D_
</body>_x000D_
</html>
_x000D_
By using a div
with style z-index:1;
and position: absolute;
you can overlay your div
on any other div
.
z-index
determines the order in which divs 'stack'. A div with a higher z-index
will appear in front of a div with a lower z-index
. Note that this property only works with positioned elements.
Here follows a simple solution 100% based on CSS. The "secret" is to use the display: inline-block
in the wrapper element. The vertical-align: bottom
in the image is a hack to overcome the 4px padding that some browsers add after the element.
Advice: if the element before the wrapper is inline they can end up nested. In this case you can "wrap the wrapper" inside a container with display: block
- usually a good and old div
.
.wrapper {_x000D_
display: inline-block;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.hover {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
right: 0;_x000D_
bottom: 0;_x000D_
background-color: rgba(0, 188, 212, 0);_x000D_
transition: background-color 0.5s;_x000D_
}_x000D_
_x000D_
.hover:hover {_x000D_
background-color: rgba(0, 188, 212, 0.8);_x000D_
// You can tweak with other background properties too (ie: background-image)..._x000D_
}_x000D_
_x000D_
img {_x000D_
vertical-align: bottom;_x000D_
}
_x000D_
<div class="wrapper">_x000D_
<div class="hover"></div>_x000D_
<img src="http://placehold.it/450x250" />_x000D_
</div>
_x000D_
The new Grid CSS specification provides a far more elegant solution. Using position: absolute
may lead to overlaps or scaling issues while Grid will save you from dirty CSS hacks.
Most minimal Grid Overlay example:
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;
}
That's it. If you don't build for Internet Explorer, your code will most probably work.
Source: Stackoverflow.com