- How to overlay one div over another div
- 9 Answers 9
- The Problem
- Proposed Solution
- CSS Position Required Knowledge
- The Solution
- The Result
- An Alternate (Grid) Solution
- An Alternate (No Wrapper) Solution
- Bring an element to the forefront, regardless of its size
- (CSS) Make element above all elements, regardless of size
- Solution one
- Solution two
- How to force an element above another
- Make a div display above all divs (Absolute positioning)
- Positioning element exactly over other element in css
How to overlay one div over another div
I need assistance with overlaying one individual div over another individual div . My code looks like this:
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 .
Not the case in this question but if you have one div inside another div the inner div may be fully or partially masked due to overflow: hidden , use overflow: visible instead.
9 Answers 9
#container < width: 100px; height: 100px; position: relative; >#navi, #infoi < width: 100%; height: 100%; position: absolute; top: 0; left: 0; >#infoi
a b I would suggest learning about position: relative and child elements with position: absolute .
thanks alex for your help but what I am finding now is that when I resize my window and drag it to be smaller, my info image is not staying with it’s parent div. Basically want it to move with the parent div and stay pretty much at the same position even though the screen has been resized somewhat.
@tonsils: The instructions by alex should give you the desired result, so there must be something else causing the problem you describe. Could you provide us with a sample of the code (HTML + CSS) so we can help you?
absolute ly positioned elements are positioned relative to their nearest explicitly positioned ( position:absolute|relative|fixed ) parent element. just further clarification . jsfiddle.net/p5jkc8gz
Depending on the case, this can be adapted. In my situation I didn’t need #navi to be top:0 left:0, and as a general case If you are having HTML code, it’s going to be situated as long as the HTML tree is parsed. So maybe in this case that definition is not necessary.
Adding the in z-index:10; resolved the issue I was having with the textarea being uneditable when other textarea’s was not visible. Thank you, Alex.
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 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.
Proposed Solution
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 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 , 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:
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:
For example, if a element is given position: relative , any child elements use the 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 element, because the 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:
In this example, if the two
element would cover the
element. Since
comes after
in the HTML structure it has a higher stacking order.
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.
The Solution
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 so we can create a new position context.
Then create a new position context by giving .wrapper a 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.
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 Result
The example below is boiled down to the basics, and contains some minimal styling.
/* * position: relative gives a new position context */ .wrapper < position: relative; >/* * The .navi properties are for styling only * These properties can be changed or removed */ .navi < background-color: #eaeaea; height: 40px; >/* * Position the #infoi element in the top-right * of the .wrapper element */ #infoi < position: absolute; top: 0; right: 0; /* * Styling only, the below can be changed or removed * depending on your use case */ height: 20px; padding: 10px 10px; > An Alternate (Grid) Solution
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 < --columns: 12; >/* * Setup the wrapper as a Grid element, with 12 columns, 1 row */ .wrapper < display: grid; grid-template-columns: repeat(var(--columns), 1fr); grid-template-rows: 40px; >/* * Position the .navi element to span all columns */ .navi < grid-column-start: 1; grid-column-end: span var(--columns); grid-row-start: 1; grid-row-end: 2; /* * Styling only, the below can be changed or removed * depending on your use case */ background-color: #eaeaea; >/* * Position the #infoi element in the last column, and center it */ #infoi
An Alternate (No Wrapper) Solution
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.
/* * The .navi properties are for styling only * These properties can be changed or removed */ .navi < background-color: #eaeaea; height: 40px; width: 100%; >/* * Position the #infoi element in the top-right * of the .wrapper element */ #infoi < position: relative; display: inline-block; top: -40px; left: calc(100% - 52px); /* * Styling only, the below can be changed or removed * depending on your use case */ height: 20px; padding: 10px 10px; > Bring an element to the forefront, regardless of its size
How can I get the div with class «soc-icons» to display above the div with class «bioDivContainer» when I click the share button, instead of being hidden behind it?
(CSS) Make element above all elements, regardless of size
My objective is to develop a menu that appears on the side of my webpage.
The height of the side menu causes the elements after it to move downwards. However, since the menu is sticky, it scrolls above everything and doesn’t push anything else down when I scroll.
When I assign .1em as the height of my element, the text becomes visible without pushing anything down. Nevertheless, this also causes the borders to shrink significantly. To make sure that the borders fully wrap the text, I require the height to be set as auto.
Is there a way to set the height of an element to auto without it affecting the layout of the rest of the page? Essentially, I want the element to be positioned above everything else with a z-index of 0, so that it doesn’t interfere with other elements.
This is what I have tried:
I actually have two solutions.
Solution one
The function position: sticky allows the content to stay in the same position while scrolling but still occupy the original space. However, to prevent this behavior, position: fixed can be used as it doesn’t exhibit the same feature.
Solution two
Solution one has a limitation where it fails to function when the user scrolls beyond the sidebar. Although retaining position: sticky , adjustments to its positioning, such as including float: left , and utilizing flexbox can resolve this issue. As a result, the two elements are placed next to each other.
How to Overlay One Div Over Another, Set the position to «relative» and add the margin property. Set both the width and height of the «box» class to «100%». Specify the position with the «absolute» value. Add the top and left properties. Also, specify the background and opacity of the «box» class. Style the «overlay» class by using the z-index, margin and background …
How to force an element above another
I am trying to make the left breadcrumb element clip the slightly overlapping right element that is also a breadcrumb. Despite trying to set the z-index, I haven’t been successful. Is there an alternative method to achieve this?
Follow the provided link to access the demo — it can be found at https://plnkr.co/edit/5RCH9hswONT16QJeK3KE?p=preview.
.arrow-point < display: inline-block; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 15px solid #777; /* z-index:10; */ >.arrow-body < font-family: verdana; font-size:15px; display: inline-block; background-color: #777; color:white; padding:2px 6px 2px 20px; height:20px; vertical-align:top; /* z-index:-3; */ >.arrow-tail < position: absolute; display: inline-block; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 15px solid #FFF; /* z-index:-2; */ /* margin-left:-6px; */ > Assign relative to position , then proceed to set z-index: 9999 .
The element’s positioning method is specified by the position property.
.arrow-point < display: inline-block; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 15px solid #777; /* z-index:10; */ >.arrow-body < font-family: verdana; font-size:15px; display: inline-block; background-color: #777; color:white; padding:2px 6px 2px 20px; height:20px; vertical-align:top; /* z-index:-3; */ >.arrow-tail < position: absolute; display: inline-block; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 15px solid #FFF; /* z-index:-2; */ /* margin-left:-6px; */ >If all the menus are contained within a div, apply float:left; to the parent style and have the children float:right. It is important to note that the order should be reversed. See example.
.container < position:relative; float:left; >.container > div < position: relative; margin-left: -15px; z-index: 10; font-size: 0; display: inline-block; float: right; >.container > div:last-child < margin-left:0; >.arrow-point < display: inline-block; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 15px solid #777; /* z-index:10; */ >.arrow-body < font-family: verdana; font-size:15px; display: inline-block; background-color: #777; color:white; padding:2px 6px 2px 20px; height:20px; vertical-align:top; /* z-index:-3; */ >.arrow-tail < position: absolute; display: inline-block; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 15px solid #FFF; /* z-index:-2; */ /* margin-left:-6px; */ > Submenu B Submenu A Main Menu How can I position one element below another?, Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers .
Make a div display above all divs (Absolute positioning)
Upon clicking the share button, the div containing social media icons (class=»soc-icons») is shown positioned behind a div (class=»bioDivContainer») located below.
How can I position a div with the class «soc-icons» above another div?
How to make an element be above all the other elements, More “Kinda” Related TypeScript Answers View All TypeScript Answers » mongodb exists and not null; find total commits in git; jquery id that starts with; select elements id like jquery
Positioning element exactly over other element in css
I want to add a covering div with text to a specific element, which shares the same css as some other elements. Although there are variations in the appearance of the element across different browsers, I believe that trying to perfectly align the pixels would not make a significant difference. As shown in this example, the placement of the covering div is currently estimated.
At the moment, I’m using a with identical characteristics to obtain this, but it involves a significant amount of replicated code and isn’t flawless.
This is the HTML provided below:
Level 1
score 248
Level 1
score 0
You still need to unlock this level! .level < border-radius: 20px; -webkit-border-radius:20px; -moz-border-radius: 20px; width:150px; height:220px; padding:10px; border-width: 1px; border-style: solid; background-color:transparant; color:#8C9695; margin:15px auto 0px auto; cursor:pointer; position:relative; display:block; text-decoration:none; transition: background-color 0.3s, color 0.3s; -webkit-transition: background-color 0.3s, color 0.3s; text-align:center; >.level:hover:not(> .locked) < color: white; >.locked < background-color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.8); width:172px; height:242px; position:relative; top:-135px; left:-10px; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; z-index:20; cursor:default; transition:0.3s; color:transparent; text-align:center; >.locked:hover
To precisely align elements, you can make the underlying element the parent of the overlay element, using the properties position:absolute , top , right , bottom , and left , all set to 0 . As an illustration: position:relative .
A single element is sufficient for the task. You can either conceal/reveal the locked div, alter the class of the regular element to a locked category, or transition from one to the other using a fade effect.
There are numerous methods to accomplish this task in summary.