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;
}
Related
My html is as follows:
<html>
<head></head>
<body>
<div id="board">
<div class="person"></div>
</div>
</body>
</html>
Now here is my css:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#board{
position:relative;
height:500px;
width:500px;
background:yellow;
top:5rem;
left:8rem;
}
.person{
position:absolute;
top:34rem;
left:20px;
padding:1rem;
background-color:blue;
}
Now my question is why does the div with .person not positioned absolute to the div with #board? I feel like it should work since the parent element is positioned relative and then the child should position itself absolute to that parent element because of that. When I give .person div a crazy top, it still manages to break out of the parent div. Why is that? Thanks for any feedback.
I checked your code and it seems to be working fine, it's just on the .person you have top:34rem;
If you set .person top:0rem; and change the #board's top:#rem to any other rem value, you will see the .person moving with the #board
Also, using absolute position removes that element from the document workflow, so you can place it anywhere you like on the page. Negative values work as well. The only thing is, it looks for the first non-static element (the default position for elements) as a place to start, so you can use that one as a marker instead of the window itself. If you didn't put relative on the #person and had no other non-static elements surrounding it, it would go to the outermost element and basically use the webpage as the marker for its initial positioning. Since you used relative it starts its absolute positioning there because it is the first non-static element. You can still move it anywhere, it just starts there though.
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;
}
I am finding it strange that my absolute element is completely outside the parent element. I want it just perfectly contained within 100% of the element, nothing outside of it, but this doesn't seem to be how it happens. The absolute element left and top just start from the parent element, the absolute element is on 100% of the rest of the document.
HTML
<div id="box" class="home_box">
<div class="box_hover"></div>
<h3>Heading/h3>
<p>Content</p>
</div>
CSS
#box {height:200px; width:400px;}
.box_hover {background:#000; height:100%; opacity:0.1; position:absolute; width:100%;}
As you can see the height and width are 100%. What am I doing wrong?
#box needs to be position: relative, position: fixed, or position: absolute for a position: absolute child element to be positioned relative to it.
An absolutely positioned element will be positioned to the closest parent whose position is set to relative, absolute, or fixed. Without such a parent, it'll be positioned relative to the body.
position: relative for #box is most likely what you're looking for.
You should add position:relative to parent element
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;
}
I have a streamed flash radio on my website and i set it to it's current position with absolute position. The problem is that with different resolutions it appears at different places. How do i fix this?
Thx!
An absolute position element is positioned relative to the first parent element that has a position other than static. Make sure the element your are absolutely positioning is not contained in an element which shifts position.
Add position:relative your #teljes :
#teljes { width: 1024px; height: 768px; margin: 0px auto; position:relative;}
Adding position:relative; to div will make all the absolute positioned children to take position according to parent div.