How to overlay one div over another div
Hoping someone can assist but 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 .
Would appreciate any help in achieving this.
#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> 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 .
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 .
The Problem
There are 2 separate, sibling, elements and the goal is to position the 2nd 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.
Proposed Solution
To achieve the desired result we're going to move, or position, the 2nd element, which we'll call #infoi so it appears within the 1st element, which we'll call .navi . Specifically, we want #infoi to be positioned in the top-right corner of .navi .
CSS Position Required Knowledge
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 , and fixed . By setting an element's position to one of these 3 values it's now possible the use a combination of the following 4 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 100px from the top of the page. Conversely, if we set bottom: 100px the element would be positioned 100px 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 100px 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: absolute; position: relative; 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 100px 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 {
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>上一篇: 将div垂直居中在另一个div内
下一篇: 如何覆盖另一个div的一个div