So I have a div with display:flex and position:relative.
I'd like to have an overlay element on the bottom of this div so I put position:absolute on it. If its height would be auto that would be the best but not must have. The problem is if I scroll the parent relative div then the absolute positioned goes with it. How could I pin it to the bottom?
Code
I'd like a pure css solution.
Update1:
A working solution: http://codepen.io/apreg/pen/gwBdJq
If I got what you want, you always want to have arrows on the screen. But that's fixed position then, like this:
http://codepen.io/anon/pen/mAzjWE
.actionRow {
position: fixed;
bottom:120px;
}
Related
I have a navbar at the top of the page that I want to be fixed. The problem is that if I make it fixed as opposed to absolute or something, stuff that would normally be below it takes its place and it sits on top making the content invisible. Any way I can get them to notice the fixed element and position accordingly without having to position:absolute or position:relative all of them?
nav{
width: 100%;
position: fixed;
top:0;
}
Apply a margin-top or padding-top to the first non-fixed element on the page, with a value as high as the height of the fixed-position navbar. Typically that element would be main, the first section or similar, possibly also simply the first (non-fixed) div, depending on your page structure.
My actual issue is more complicated, but it boils down to this. How can I use CSS to disallow a relative positioned div to stack on an absolute positioned div.
Example of issue:
<div id="absolute"></div>
<div id="relative"></div>
div{
width: 100px;
height: 100px;
opacity: .5;
}
#absolute{
position: absolute;
background-color: red;
}
#relative{
position: relative;
background-color: blue;
}
Codepen
Is this possible with css? So the relative positioned div would be pushed down or to the side until it is not longer covering the other absolute positioned div. Basically the relative div would act as if the absolute div is relative.
To add a little detail of the nature do the issue:
I have a webpage with an absolutely positioned menu on the top and left. I then have a div in which I am injecting templates (Angular). The issue is that the templates end up under the menus. I have tried to apply a margin or padding, but is is messing up my bootstrap grid. So I was hoping the menu could be treated Iike it was relative in regards to the main div, but still stay in place.
When you use position:absolute, you're telling the browser layout engine that this element is removed from the layout of the page. You are specifying a manual position that will not impact the layout of the page in any way. Thus, you cannot both position it manually and have things layout around it.
You must pick one of the other, either don't use position: absolute so that it will participate in the layout of the page or make everything absolute and manually position things not to overlap.
There are some hybrid approaches where a item can be positioned absolutely in a container and the container itself is relative (not absolute) so that the container participates in the layout of the page and things will lay out around the container (and thus around the absolute positioned element if the container is set to be the right size), but this is really just a technicality as it puts the absolute positioned item into a non-absolute positioned container so it isn't really absolute positioned on the overall page any more.
It sounds like your problem would be solved by separating the elements and applying a float property. However, per your question, when your use the relative property, it allows you to set the position relative to it's parent. If the absolute positioned element is the parent, then your code is incorrect and keeping them separated would be a matter of hard-coding them to maintain a minimum distance from one another. However, it is not the parent then the elements have no relation to each other and you must explicitly define their position in order for them to not interact with each other. But again, it sounds like a situation to apply the float property.
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 one div - the #container - that stretches across the window, filled with a graphic. I need a bar to float over the container div on the right side. If I use position:absolute and right:0, the div is positioned according to the window, not the #container div.
If I use position:relative, then the div is positioned according to the #container div but still takes up space and won't be hovering over the #container content.
Here is a JSFiddle that I made with my attempt.
http://jsfiddle.net/y8LCu/
NOTE that I do not want to use float:right, because that would keep the side div in the flow of the content, which I do not want.
I think I got it the way you wanted it?
http://jsfiddle.net/y8LCu/9/
You needed to make the parent position: relative and if you don't want the overflow you need overflow: hidden.
position:absolute; allows you to position an element compared to any positioned ancestor.
<div class="parent">
<div class="child">
</div>
</div>
.parent { position : relative; }
.child { position : absolute; }
Now, child will position itself based on the parent.
If the parent doesn't have a position set, then it will look at the position of the grandparent...
...and on and on, and if none of them have a position set, then it will look at the position of the actual web-page.
Also, if you have multiple positioned elements (whether relative/absolute/fixed) near the same place, and you want them to overlap in an order you set in CSS, and not in the order of which is set on the page last...
...then you also need to start using z-index (which only works on positioned elements).
The higher it is, the more stuff it stacks on top of.
Set the parent's position to relative
#container
{
position:relative;
}
For example: http://jsfiddle.net/MYvYy/182/
I have a lot of 'inner_box' elements inside of 'outer_box'. Inner_box elements a absolute.
I would like to adjust the outer_box height so that all inner_box elements fit in the outer_box.
I know it can be done with js. But I don't really like adjusting style with scripts.
So I was wondering if it is possible to be done using CSS?
I have some workaround for this problem, it may not fit your situation but consider looking at it.
First of all we need to duplicate all absolute positioned div which you want to make the parent extend to its height.
So your HTML will look like this.
<div class="outer_box">
<div class="inner_box">1</div>
<div class="inner_box ghost">1</div>
</div>
Then we need to add the "ghost div" CSS like so:
.inner_box.ghost{
visibility: hidden;
width: 100%;
top: 0;
left: 0;
position: relative;
}
It's not possible with CSS alone.
Layout flow:
An element with position:absolute is outside of the layout flow of the rest of the page. As far as the relative parent is concerned, the absolute child occupies no space in the layout.
This is very useful if you need to have a pop-up or a nav menu nested inside a container, because it won't affect the layout of the container. That's the sort of use case that position:absolute is well-suited for.
Fixed height:
If you need absolute content to behave as if it's a part of the layout flow, use fixed height. Give the relative parent and the absolute child a fixed height, and avoid placing any variable-height child elements before the absolute child. If variable-height content does precede it, use a relative placeholder div with a fixed height at the location where the absolute child needs to appear.
If position:absolute has to be used and fixed height is not an option, use JavaScript.
I only can provide you with Javscript fix for this using jQuery lib.
let me know if you use it or not,
$('.outer_box').height($('.inner_box').outerHeight());
This line will fix the outer_box height
I have tried the Fixed height method, but on small screens it is overlapping. So I have solved this problem by setting overlay background layer to seperate division and content to another division.
<div style="position:relative; background-color: blue; background-image:url('banner.png'); background-size:cover; background-position: center top;">
<div style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#00000099;"></div>
<div style="position:relative;z-index:2;"><h1 style="color:#fff;">Hello</h1></div>
</div>
I have uploaded the code on Codepen: https://codepen.io/shahbaz8x/pen/GRjEBze
I fixed it by changing the position property of div.inner_box into
position:relative
if this is not what you'r looking for, or this didn't fix it, then you will have to use Javascript.