I have a structure where there are many relative position div and inside them another div with position: absolute. Now I want to show this absolute position div on top left corner of screen, covering full screen for mobiles as overlay or dialog and user also able to scroll this, overlay or dialog can have forms.
Fixed position is not solution.
How I can do that ?
<div class="relative">relative
<div class="absolute">absolute</div>
.relative {
position:relative;
margin-top:500px;
}
.absolute {
position:absolute;
top:0
}
EDIT: JSFIDDLE
People are very quick at down vote :) slow at suggestion
Update:
i can't use negative margin because i don't know the location of the relative div it can be anywhere in document and i can't make it direct child of the body
Just counter the positioning the .relative element has. Here your .relative element has a margin-top of 500px, so we can make our .absolute element appear 500px above by specifying a top of -500px:
.absolute {
position:absolute;
top:-500px;
}
JSFiddle demo.
Related
I have layout like this:
Entire right content's position is absolute
I want to be able scroll only this I should scroll boxes and this gray content to stay in his place.
Code and playground on => codepen
you need to modify your CSS file
.user-search-box .result-list{
position: absolute;
max-height:100%;
min-width:100%;
overflow:scroll;
}
Here is a jsfiddle:
https://jsfiddle.net/mcgfhL10/
#description{ /*Just a breif description of the product. */
font-family:"microsoft sans serif";
font-size:22px;
position:relative;
overflow-y:scroll;
bottom:40px;
width:400px;
height:150px;
background:black;
}
I would like the div with id description to fall to the bottom of the div with id shelf. However, it falls to the bottom of the image, which is a sibbling? how is this working?
The problem with your code is that your description is positioned relatively and your parent has no positioning set at all. This means that the description basically doesn't know that it lives inside the shelf and is instead calculating its position relative to the image, which is the closest element. (If you set the bottom: 40px to 0px in description, you will notice that it will sit snugly under the image).
You have to make the child absolute and the parent relative. If you position a child element relative and then set the child bottom to 0px, it won't stick either. You're basically telling it to not move anywhere. (Relative means relative to its current center).
Here is a demo for reference: jsFiddle Demo
.shelf {
position: relative;
}
.description {
position: absolute;
}
I strongly suggest you read up on CSS positioning and display before you go any further. It will help you a lot if you know the foundations well.
CSS Tricks
A List Apart
Your description needs to be positioned absolute, because it is not relative to the other elements, but absolute within the parent container. You also need to move your description div on top of the image.
So your HTML becomes:
<div id="description"><p>foobar</p></div>
<img id="image" src = "image.jpg">
and your CSS addition is:
#description{
position: absolute;
}
Here's a fiddle: https://jsfiddle.net/jgghpcmy/1/
Goal
I would like to position an element absolutely.
Issues
Oddly, said element somehow appears as if it were position: fixed. Weird!
html, body {
height:100%;
}
.absolute {
position:absolute;
}
This creates an element that acts like it is fixed on the page.
This is very puzzling and inconvenient. Here is a JSfiddle.
Help
Is there a way that I can add absolute positioning to this element without changing html and body height?
One last thing to note: In my case, the content inside the body overflows window height, if that's important...
Thank you for your help!
edit: Changed title slightly, removed unneeded interjections.
First let's understand how position:absolute works.
absolute position removes an element from the normal flow of the document and places it relative to the first parent that has relative positioning.
The default value of position property is static. So the class .absolute has no parent that is relatively positioned. Therefore it stays relative to the viewport and appears all the time even when you scroll.
So set a parent element of .absolute to relative positioning and you will get the desired result. Here, you can set the .element to relative positioning.
.element{
width:100%;
height:2000px;
position:relative;
}
You can open the fiddle below and scroll to see the desired effect.
Fiddle - jsFiddle
by default position absolute is relative to the body beacause the absolute element is out of the elements flow. So if you want your absolute element to be abble "to understand" the other elements and be abble to move width parent, it's parent should be in relative position.
regardless to your JSFiddle put a position relative to .element the .baby should be abble to move with it parent
.element {
width:100%;
height:2000px;
position:relative;
}
I have a css animation, which makes a div go under another div. DIV 1 goes under DIV 2. If I make DIV 2 absolutely positioned, the page will break in pieces. But if I don't make the DIV 2 absolutely positioned, the DIV 1 will not go under it, buy stay at the top of the div.
You can check it out live here
This is how it looks without making the right content absolutely positioned.
If you hover your mouse over the map, you will see the transition.
Any helpful solutions of getting rid of this? I would really appreciate.
Thanks in advance.
That is why it don't work, your parent div has to have position to child div position take effect.
.div1, .div2{
position:relative;
}
.div3{
position:absolute;
}
Take a look here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Make Div 2 be position: relative so that it stays in the flow. See How to make div's percentage width relative to parent div and not viewport
From that answer:
Specifying position:relative; or position:absolute; on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/
I managed to make it work:
#content {
position: relative;
}
.info {
z-index: 0;
position: relative;
}
To make the #content to be the top layer add z-index with a higher value with the other div.
Take note, z-index doesn't work if you don't set your div position:absolute or position: relative
#content {
position: relative;
z-index: 3;
}
I have created a popup that appears and nearly fills the screen, and this popup is fixed so that it will remain centered on screen when the user scrolls the main page. But this popup is also scrollable and I have a header at the top of it that I want to always be visible.
How could I fix the header such that it will always be visible when the popup window is scrolled?
It seems if you set position:fixed this is always relative to the browser viewport, therefore it would be fixed to the top of the page not its parent container. Is this a task for sticky positioning in Webkit, or how can that be achieved?
JSFiddle demonstrating the issue - scroll the blue popup and the yellow header scrolls away when I want that to be fixed.
Change your CSS styling of #header to the following:
#header {
position:fixed;
width: inherit;
height:2em;
background-color:yellow;
}
Working fiddle here
If your parent is having a position relative or absolute or fixed, then the child will position itself with respect to the parent element.
Add position:fixed to #header and padding-top:2em to make the text visible.
#header {
position: fixed;
width:100%;
height:2em;
padding-top:2em;
background-color:yellow;
}
Here is the Fiddle : http://jsfiddle.net/nmuk3cv6/3/