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.
Related
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;
}
Please bear with me... and excuse my (probably) incorrect terminology:
In the following code I don't grasp why you set the containing (parent) div to 'position:relative' in order for the divs inside to be positioned in relation to the parent div (using 'position:absolute). I thought in order for this to happen the children divs would be set 'relative' to the parent. Am I to understand that essentially the parent div is saying to the other divs inside "hey, you can all be positioned 'relative' to me now!" I sort of expected it to work the other way around.
E.g. I expected the text would have been positioned "relative" to the containing div. Can someone explain why it works the way it does here? Thanks.
<div id="backgroundImage">
<h2 class="titleBox">I AM A TITLE</h2>
<p class="textBox">I am a description box</p>
</div>
#backgroundImage {
position: relative;
height: 225px;
width: 300px;
background-image: url (#);
}
.titleBox {
position: absolute;
top: 15px;
left: 0;
}
.textBox {
position: absolute;
bottom: 10px;
left: 0;
}
The documentation explains this very well, but I'll summarize.
An element with position:relative is first laid out just like any static element ... shifted according to the top, bottom, left and right properties
The position: relative box can be adjusted relative to its parent (even if its parent is static).
For position: absolute,
the containing block is the nearest positioned ancestor. By “positioned” I mean an element whose position property is set to relative, absolute or fixed
That is, the top, bottom, etc. properties on a position: absolute element are relative to the nearest containing element of a position other than static (including relative).
That is to say that position: absolute elements can still be positioned relatively.
You position the child elements absolutely, i.e you are specifying x/y co-ordinates for them (using left and top properties).
By default these will be positioned absolutely to the document, but by setting a parent container as position:relative, they will be positioned relative to that div, in an absolute manner.
If you set your element as position 'absolute' it will be out of the DOM.So you can set where ever you want unless or until your absoluted element parent or parents of parent... does not having any position relative.why we use position relative actually is if u want to style the the element irrespectively with other elements inside container, u can set position relative to the parent(means container). If #backgroundImage does not have position relative , your child elements will go initial position of your screen but if u want some where in the middle of ur page u have to styled the "backgroundImage" element as position :relative .. then the child element wil fly inside your "backgroundImage" container.
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 am building a small web application.
I have two divs. One is absolute and the other is static.
I am trying to position my static div on top of my absolute one, so that it remains the top most item.
Very simple Code Sample:
http://jsbin.com/efuxe3/edit
How can this be done?
Edit:
I have been using z-index. It seems to have no effect.
z-index doesn't apply to static elements.
According to this page:
This property specifies the stack
level of a box whose position value is
one of absolute, fixed, or relative.
If you make your div relative instead, you can use z-index to determine the order.
position: relative positions the element relative to its default (static) position, so if you don't specify a top, bottom, left or right then there'll be no difference between static and relative other than that relative allows you to use z-index to move your element up the stack.
Edit: based on your code sample, here's a working demo.
Edit 2: based on Nathan D. Ryan's suggestion in the comments below, you could also apply a negative z-index to your absolutely-positioned div. This would move it behind everything else on the page that didn't have a lower z-index defined.
Rather than placing the statically positioned element over the absolutely positioned element, you can place the absolutely positioned element behind the statically positioned element. You can do this by setting the z-index of the absolutely positioned element to a negative value. However, as #Town mentioned, this will also place the absolutely positioned element behind everything else in the normal flow.
You can apply a negative z-index to the other elements placing them behind the static div. This can be applied directly to the other elements or you can use
*:not(connectedObjects){
z-index:-1000000000000000000000000000;
}
But this does not work in internet explorer
You could have a second absolutely positioned div to contain your statically positioned elements:
<div id="container">
<div class="underlay">
I want this to appear under my static items.
</div>
<div class="item_container">
<div class="item">blah</div>
<div class="item">yada</div>
<div class="item">foo</div>
<div class="item">bar</div>
</div>
</div>
And your css is
.underlay {
position: absolute;
z-index: 0;
}
.item_container {
position:absolute;
z-index:10;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.item {
position: static;
}
if by top you mean z-Index, you can set the style of that div with a higher z-index
div.divClassName {
z-Index:100;
}
edit:
you can change the z-index of your div, with absolute positioning to a negative, but then you will have to do so for every other element.
Unless you really have a really good reason to using positioning to static you can change it
to relative, and the z-index will have an effect.io have tried it in your code sample and it works fine;
Work with z-index attribute. The z-index of the object which should be at front must be higher than the other ones.