Html div floating on top
Float a DIV on top of another DIV
That is, we can create a new position context by giving a parent element: For example, if a element is given , any child elements use the as their position context. 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 comes after the other element.
Make one div float over another?
I have two div elements on a page. How can I make one div float over another just like a popup? In other words, div2 (the popup) would cover some part of the area of div1 (the parent).
Use position:absolute; and set the «popup» one to be positioned within the boundaries of the other. The «popup» div should likely also be smaller.
Use z-index to stack the «popup» one above the other one (give it a higher value for z-index ).
If you want to make it look like the inner div is really floating above the other one, create a shadow with something like border-right:2px solid black and border-bottom:2px solid black .
If you want to make it actually pop up/appear/disappear, you will need to use some script.
I believe setting the position to fixed will cause it to stay visible even if the user scrolls. You can set the position using «top», «left» and «right» attributes. The CSS I use for a «beta» logo which basically does what you are asking is this:
Then use z-index property of css like this :
Highest z-index element will be display at top.
Html — Make one div float over another?, Use position:absolute; and set the «popup» one to be positioned within the boundaries of the other. The «popup» div should likely also be smaller. Use z-index to stack the «popup» one above the other one (give it a higher value for z-index ). If you want to make it look like the inner div is really floating above the … Code samplediv1 div2
Float a DIV on top of another DIV
I was recently assigned the job of copying a JS popup our previous web developer made. I’ve got it very similar yet there’s one thing I can’t get, for the close button (X) to float over the popup in the top right corner (rather than being sat on top right corner of the popup). I’ve tried with position: values in the CSS and other attributes I’ve found around Stack overflow, yet none seem to do the trick.
#popup < position:absolute; display:hidden; top:50%; left:50%; width:400px; height:586px; margin-top:-263px; margin-left:-200px; background-color:#fff; z-index:2; padding:5px; >#overlay-back < position : fixed; top : 0; left : 0; width : 100%; height : 100%; background : #000; opacity : 0.7; filter : alpha(opacity=60); z-index : 1; display: none; >.close-image
Just add position, right and top to your class .close-image
Use this css
I think this might be what you are looking for.
I know this post is little bit old but here is a potential solution for anyone who has the same problem:
First, I would change the CSS display for #popup to «none» instead of «hidden».
Second, I would change the HTML as follow:
I got this idea from this website (kessitek.com). A very good example on how to position elements,:
How to position a div on top of another div
Css — Float a DIV on top of another DIV, I’ve got it very similar yet there’s one thing I can’t get, for the close button (X) to float over the popup in the top right corner (rather than being sat on top right corner of the popup). I’ve tried with position: values in the CSS and other attributes I’ve found around Stack overflow, yet none seem to do the trick. The CSS:
How to overlay one div over another div
I need assistance with overlaying one individual div over another individual 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 .
#container < width: 100px; height: 100px; position: relative; >#navi, #infoi < width: 100%; height: 100%; position: absolute; top: 0; left: 0; >#infoi
I would suggest learning about position: relative and child elements with position: absolute .
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
elements were positioned in the same place on the page, the
Top
element would cover the
Bottom
element. Since
Top
comes after
Bottom
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; >
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 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.
.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.
Css — Float a div above page content, It will position your content element on top of every other element on the page. Say you have z-index to some elements on your page. Look for the highest and then give a higher z-index to your popup element. This way it will flow even over the other elements with z-index. If you don’t have a z-index in any …
Источник
